Bagaimana cara menampilkan/menyembunyikan elemen navigasi berdasarkan status pengguna menggunakan Aurelia

Saya cukup baru mengenal Aurelia dan saya menyukai setiap menit dari kurva yang condong. Saya menggunakan Navigasi Kerangka Aurelia untuk aplikasi es6 dan saat ini saya sedang mengerjakan aplikasi sederhana tempat pengguna masuk dan mengirimkan cerita setelah memberikan detail tertentu. Alur aplikasi saya cukup sederhana:

Login Screen --> Screen where user provides phone number --> User submit's story

Bilah navigasi saya memiliki "Beranda" dan "Kirim Cerita". Namun, saya ingin menyembunyikan item menu "Kirim Cerita" hingga pengguna memberikan nomor teleponnya. Jadi pada dasarnya pada pengiriman nomor telepon, jika fungsinya kembali benar, saya memerlukan item menu untuk muncul.

Saya pikir ada dua cara untuk melakukan hal ini. Salah satunya adalah dengan mengikat item navigasi ke nilai benar atau salah tergantung pada apakah nomor telepon dikirimkan, dan yang lainnya adalah menambahkan rute secara dinamis jika nomor telepon berhasil dikirimkan. Mana yang lebih baik untuk digunakan? Dan saya akan sangat menghargai dorongan ke arah yang benar.

Saya mencoba menetapkan variabel boolean ke rute tetapi hasilnya beragam. Lihat kode di bawah ini (saya hanya menyertakan kode terkait):

check_phone = false;

configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
        {route: ['', 'home'], name: 'home', moduleId: 'home', nav: check_phone, title: 'Home'},
        {route: 'story', name: 'story', moduleId: 'story', nav: check_phone, title: 'Submit a Story'}
    ]);
    config.mapUnknownRoutes('/');
    this.router = router;
}

phone_submit() {
    if(success) this.check_phone = true;
}

Saya juga mencoba menambahkan rute secara dinamis tetapi tidak berhasil:

configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
        {route: ['', 'home'], name: 'home', moduleId: 'home', nav: check_phone, title: 'Home'},
    ]);
    config.mapUnknownRoutes('/');
    this.router = router;
}

phone_submit() {
    if(success) 
        this.router.addRoute({route: 'story', name: 'story', moduleId: 'story', nav: true, title: 'Submit a Story'})
        this.router.refreshNavigation();
}

Tolong bantu saya dalam hal ini. Terima kasih atas waktu Anda!


person realnsleo    schedule 11.08.2016    source sumber


Jawaban (1)


Sebenarnya ada properti pengaturan pada rute. Anda dapat mengatur properti pengaturan ke objek yang dapat Anda manipulasi. Anda dapat menggunakan objek ini saat merender rute dan menyembunyikan bilah navigasi jika objek tersebut memiliki properti tertentu.

misalnya {rute: pengguna/:id', nama: pengguna, moduleId: './Aurelia/users, nav: false, judul: 'Pengguna', pengaturan: {isShown: true} }

Periksa artikel saya tentang linked-in pada topik yang menjelaskan penggunaan properti pengaturan secara lebih menyeluruh;

https://www.linkedin.com/pulse/routing-aurelia-framework-mike-gold?trk=mp-author-card

person mike gold    schedule 24.08.2016