0

Я совершенно новый для Aurelia, и я любя каждую минуту кривой наклона. Я использую Skeleton Navigation Aurelia для приложений es6, и сейчас я работаю над простым приложением, в котором пользователь входит в систему и отправляет историю после предоставления определенных сведений. Поток моего приложения достаточно прост:Как я могу показать/скрыть элементы навигации на основе состояния пользователя, используя Aurelia

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

Моя навигационная панель имеет «Home» и «Submit Story». Однако я хочу скрыть пункт меню «Отправить историю», пока пользователь не предоставит свой номер телефона. Таким образом, в основном на отправке номера телефона, если функция возвращает true, мне нужно отобразить пункт меню.

Я думаю, что есть два способа сделать это. Один из них - привязка элементов nav к истинному или ложному значению в зависимости от того, отправлен ли номер телефона, а другой - динамически добавлять маршрут при успешном представлении номера телефона. Какой из них лучше использовать? И я был бы очень признателен за то, что вы вертетесь в правильном направлении.

Я попытался назначить логическую переменную маршрутам, но это дало мне смешанные результаты. Смотрите ниже код (я включил только соответствующий код):

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; 
} 

Я также попытался динамически добавлять маршрут, но он не работает:

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(); 
} 

Пожалуйста, помогите мне в этом. Спасибо за ваше время!

ответ

2

На маршруте есть свойство настроек. Свойство settings можно установить для объекта, в котором вы можете манипулировать. Вы можете использовать этот объект при рендеринге вашего маршрута и скрывать его, если он обладает определенным свойством.

например. {путь: пользователь /: идентификатор ' имя: пользователь, moduleId:' ./Aurelia/users, нав: ложь, название: 'User', настройки: {isShown: истинно}}

Проверьте мою статью о подключении по теме, которая более подробно объясняет использование свойств настроек;

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