Question

此问题是我原始问题Linking directly to both parent+child views/controllers from the main navigation menu

的后续问题

接受的答案很棒，但后来当我添加第二个＆＃34; childRoute＆＃34;动态地，我注意到了一个问题。为了动态地构建我的导航，我不得不添加多个路由，使用相同的＆＃34; route＆＃34;属性。（请参阅下面示例代码中的app.js）。唯一的区别是＆＃34;标题＆＃34;和＆＃34;设置＆＃34;属性。

configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: 'shared-parent', moduleId: './shared-parent', settings: { childRoute: 'child-a' }, nav: true, title: 'Shared Parent - child-a' },
        { route: 'shared-parent', moduleId: './shared-parent', settings: { childRoute: 'child-b' }, nav: true, title: 'Shared Parent - child-b' },
        ...
    ]);

    this.router = router;
  }

我在视图中使用的设置属性：

<a if.bind="row.settings.childRoute" href.bind="row.href + '/' + row.settings.childRoute">${row.title}</a>

我知道它并不漂亮，但确实可以导航到正确的儿童路线。问题是它始终是具有重复＆＃34; route＆＃34;的2条路线中的最后一条。标记为活动的属性。

我之所以添加settings: {childRoute: 'child-a/b' }而不是给它们分开＃34; route＆＃34; route: 'shared-parent/child-a'和route: 'shared-parent/child-b'之类的属性实际上是匹配shared-parent/child-a/child-a和shared-parent/child-b/child-b，因为我们首先链接到共享父级。

这个可运行的要点应该清楚地显示问题（孩子 - 一条永不激活的路线）：https://gist.run/?id=95469a9cb3a762d79da31e0b64248036

聚苯乙烯。如果您更好地了解该问题的标题，请随时编辑。

Answer 1

所以我在子视图模型的Activate生命周期钩子中使用EventAggregator来解决您的问题。

https://gist.run/?id=bfb5df5e39ac0bb73e9e1cae2d2496e2

在子视图模型中，我刚刚发布了一个事件，说明子路径已更新：

activate(params, routeConfig, navigationInstruction) {
  let payload = navigationInstruction.parentInstruction.config.title;

  payload = payload.substring(0, payload.length - 7);

  this.aggregator.publish("child route updated", payload + "child-a");

}

在app.js文件中，我更新了路径标题，并添加了activeChild属性。接下来，在捕获事件时更新activeChild属性：

constructor(aggregator) { 

  this.aggregator = aggregator; 



  this.aggregator.subscribe("child route updated", payload => { 

    this.activeChildRoute = payload;

    console.log(this.activeChildRoute);

  });

}

最后，我更新了列表项上的类表达式，以根据该活动子Flag进行更新：

    <li repeat.for="row of router.navigation" 
        class="${row.title === activeChildRoute ? 'active' : ''}">

如何从链接到父/子视图/控制器的路径动态构建导航菜单

1 个答案: