在Aurelia中將“相關”路線設置為有效

Question

我的Aurelia應用程序中有兩條路線，一個列表（工作）和一個細節（WorkDetail）。

在導航中，我只有列表路徑：

Home  |  *Work*  |  Contact  |  . . .

當我導航到WorkDetail視圖時，我想在導航中將工作路線設置為活動狀態。

到目前為止我嘗試過的是在WorkDetail視圖的activate()回調中activate()路由，在deactivate()上deactivate()非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到“工作”文件夾中。 單擊導航欄中的“工作”鏈接時，默認情況下將顯示工作列表。 當您鑽入工作列表中的項目時，導航欄中的“工作”鏈接將保持活動狀態。

查看示例應用程序 。 它有三個頂級部分（訂單，客戶和員工）。 每個部分都使用這種方法。 代碼在這里 。