Question

我的Aurelia应用程序中有两条路线，一个列表（工作）和一个细节（WorkDetail）。

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

activate()

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

到目前为止我尝试过的方法是在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; }; }上无效：

{{1}}

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

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

如果你有兴趣，请点击我的app.js：https://gist.github.com/alsoicode/37c5699f29c7562d2bf5

Answer 1

如果我正确理解了问题，您的导航栏中会显示“工作”链接，该链接会启动“工作”列表。然后，当您单击工作列表中的某个项目时，您希望导航栏中的“工作”链接在激活工作“详细信息”屏幕时保持活动状态。

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

在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添加到“工作”文件夹中。单击导航栏中的“工作”链接时，默认情况下将显示工作列表。当您钻取工作列表中的项目时，导航栏中的“工作”链接将保持活动状态。

查看sample application。它有三个顶级部分（订单，客户和员工）。每个部分都使用这种方法。代码为here。

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

1 个答案: