如何使用 Aurelia 根据用户状态显示/隐藏导航元素答案

【问题标题】：How can I show/hide navigation elements based on a user's state using Aurelia如何使用 Aurelia 根据用户状态显示/隐藏导航元素
【发布时间】：2016-08-25 06:36:07
【问题描述】：

我对 Aurelia 很陌生，我喜欢倾斜曲线的每一分钟。我正在为 es6 应用程序使用 Aurelia 的骨架导航，我目前正在开发一个简单的应用程序，用户在提供某些详细信息后登录并提交故事。我的应用程序的流程相当简单：

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

我的导航栏有“主页”和“提交故事”。但是，我想在用户提供他的电话号码之前隐藏“提交故事”菜单项。所以基本上在电话号码提交上，如果函数返回 true 我需要显示菜单项。

我认为有两种方法可以解决这个问题。一种是根据是否提交电话号码将导航项绑定到真或假值，另一种是在成功提交电话号码时动态添加路由。哪个更好用？我将非常感谢您朝正确的方向轻推。

我尝试为路由分配一个布尔变量，但结果好坏参半。请参阅下面的代码（我只包含了相关代码）：

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

请帮助我。感谢您的宝贵时间！

【问题讨论】：

标签： aurelia

【解决方案1】：

路由上实际上有一个设置属性。您可以将设置属性设置为可以操作的对象。您可以在渲染路线时使用此对象，并在导航栏具有特定属性时将其隐藏。

例如 {路由：用户/：id'，姓名：用户， moduleId: './Aurelia/users, 导航：错误，标题：'用户'，设置：{isShown：真} }

查看我关于链接的主题的文章，该主题更彻底地解释了使用设置属性；

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

【讨论】：