设置“相关”在Aurelia活跃的路线

问题描述

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

I have two routes in my Aurelia app, a list (Work) and a detail (WorkDetail).

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

In the navigation, I only have the list route:

Home  |  *Work*  |  Contact  |  . . .

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

When I navigate to the WorkDetail view, I would like to set the Work route as active in the navigation.

到目前为止我尝试过的是在 activate（）中回调 WorkDetail 在上查看和不活动>停用（）：

What I've tried so far is setting the route active in the activate() callback of the WorkDetail view and inactive on 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，它将被设置为活动。

The problem I'm experiencing is that on the first activation, the "Work" nav item isn't displayed as "active". If I nav to another WorkItem, it will be set as "active".

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

Why is that nav item only set as active on a subsequent nav action? or, is there a better way to set a parent/related navigation item as "active"?

如果您有兴趣，这是我的app.js：

Here's my app.js if you're interested: https://gist.github.com/alsoicode/37c5699f29c7562d2bf5

推荐答案

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

If I understand the question correctly, you have a "Work" link in your nav-bar, which launches the list of "work". Then when you click on an item in your work list you want the "Work" link in the nav-bar to remain active when the work "detail" screen is activated.

这是我在中使用的方法：

Here's the approach that I used in this application:

在app.js中，配置工作路线：

In app.js, configure the "work" route:

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文件夹。此文件夹将包含工作相关视图和视图模型。

Then add a "work" folder to your project. This folder will contain the "work" related views and view-models.

在工作文件夹中，添加work-section.js：

In the work folder, add "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> ：

Next add "work-section.html". It's just a <router-view>:

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

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

Finally, add your work-list.js + .html and work-detail.js + .html to the "work" folder. When clicking on the "work" link in the nav-bar, the work-list will be displayed by default. When you drill into an item in the work-list, the "work" link in the nav-bar will remain active.

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

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

这篇关于设置“相关”在Aurelia活跃的路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！