Setting a “linked” route as active in Aurelia

Question

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

In navigation, I only have a list route:

Home  |  *Work*  |  Contact  |  . . .

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

So far I have tried to configure the route in the activate()view callback WorkDetailand is inactive in 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;
    };
}

The problem I ran into is that the first time you activate, the Work item nav does not appear as “active”. If I am on a different WorkItem, it will be set as “active”.

nav nav? , / "" ?

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". "" . , "" .

. (, ). . .