Eu tenho duas rotas no meu aplicativo Aurelia, uma lista (Trabalho) e um detalhe (WorkDetail).

Na navegação, só tenho a rota da lista:

Home  |  *Work*  |  Contact  |  . . .

Ao navegar para a visualização Detalhes do trabalho, gostaria de definir a rota de trabalho como ativa na navegação.

O que eu tentei até agora é definir a rota ativa noactivate() retorno de chamada doWorkDetail visualizar e inativo emdeactivate():

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;
    };
}

O problema que estou enfrentando é que, na primeira ativação, o item de navegação "Trabalho" não é exibido como "ativo". Se eu navegar para outro WorkItem, ele será definido como "ativo".

Por que esse item de navegação é definido apenas como ativo em uma ação de navegação subsequente? ou, existe uma maneira melhor de definir um item de navegação pai / relacionado como "ativo"?

Aqui está o meu app.js se você estiver interessado:https://gist.github.com/alsoicode/37c5699f29c7562d2bf5