在Aurelia中将"相关"路线设置为有效

Question

我的Aurelia应用程序中有两条路线,一个列表(工作)和一个细节(WorkDetail).

在导航中,我只有列表路径:

Home  |  *Work*  |  Contact  |  . . .

当我导航到WorkDetail视图时,我想在导航中将工作路线设置为活动状态.

到目前为止我尝试过的是activate()在WorkDetail视图的回调中激活路由并在deactivate()以下时间处于非活动状态:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class WorkDetail {
    constructor(router) {
        this.workRoute = router.routes[2].navModel;
    };

    activate(params, routeConfig, navigationInstruction) {
        this.workRoute.isActive = true;
    };

    deactivate() {
        this.workRoute.isActive = false;
    };
}

我遇到的问题是,在第一次激活时,"工作"导航项不会显示为"活动".如果我导航到另一个WorkItem,它将被设置为"活动".

为什么该导航项仅在后续导航操作中设置为活动状态？或者,有没有更好的方法将父/相关导航项设置为"活动"？

如果你有兴趣,这是我的app.js:https://gist.github.com/alsoicode/37c5699f29c7562d2bf5

Answer 1

如果我正确理解了这个问题,你的导航栏中会有一个"工作"链接,它会启动"工作"列表.然后,当您单击工作列表中的某个项目时,您希望导航栏中的"工作"链接在激活工作"详细信息"屏幕时保持活动状态.

这是我在这个应用程序中使用的方法:

在app.js中,配置"工作"路径:

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: '', redirect: 'work' },
      { route: 'work', moduleId: './work/work-section', nav: true, title: 'Work' },
      // ... routes for other top-level sections ...
    ]);
    this.router = router;
  }
}

然后在项目中添加"work"文件夹.此文件夹将包含"工作"相关视图和视图模型.

在工作文件夹中,添加"work-section.js":

/**
* The shell for the work section of the application.  Will display either
* the work-list or work-detail page.
*/
export class WorkSection {
  configureRouter(config, router) {
    config.map([
      { route: '',    moduleId: './work-list',   nav: false, title: '' },
      { route: ':id', moduleId: './work-detail', nav: false, title: '' },
    ]);
  }
}

接下来添加"work-section.html".这只是一个<router-view>:

<template>
  <router-view></router-view>
</template>

最后,将你的work-list.js+ .html和work-detail.js+ 添加.html到"work"文件夹中.单击导航栏中的"工作"链接时,默认情况下将显示工作列表.当您钻入工作列表中的项目时,导航栏中的"工作"链接将保持活动状态.

查看示例应用程序.它有三个顶级部分(订单,客户和员工).每个部分都使用这种方法.代码在这里.