在 Aurelia 中将 "related" 路线设置为活动路线

Question

我的 Aurelia 应用程序中有两条路线，一个列表 (Work) 和一个详细信息 (WorkDetail)。

在导航中，我只有列表路线：

Home  |  *Work*  |  Contact  |  . . .

当我导航到 WorkDetail 视图时，我想在导航中将工作路线设置为活动。

到目前为止，我尝试过的是在 WorkDetail 视图的 activate() 回调中将路由设置为活动状态，并在 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;
    };
}

我遇到的问题是，在第一次激活时，"Work" 导航项未显示为 "active"。如果我导航到另一个 WorkItem，它将被设置为 "active".

为什么该导航项仅在后续导航操作中设置为活动状态？或者，是否有更好的方法将 parent/related 导航项设置为 "active"?

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

Answer 1

如果我对问题的理解正确，您的导航栏中有一个 "Work" link，它会启动 "work" 的列表。然后，当您单击工作列表中的项目时，您希望导航栏中的 "Work" link 在工作 "detail" 屏幕激活时保持活动状态。

这是我在 this application 中使用的方法：

在app.js中配置"work"路由：

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" 相关视图和视图模型。

在工作文件夹中，添加"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" 文件夹。单击导航栏中的 "work" link 时，将默认显示工作列表。当您深入到工作列表中的项目时，导航栏中的 "work" link 将保持活动状态。

查看 sample application. It has three top-level sections (orders, customers and employees). Each section uses this approach. The code is here。

在 Aurelia 中将 "related" 路线设置为活动路线

Setting a "related" route as active in Aurelia

javascript

aurelia