如何从链接到父/子视图/控制器的路线动态构建导航菜单 [英] How to dynamically build navigation menu from routes linking to parent/child views/controllers
问题描述
This question is a follow-up question for my original question Linking directly to both parent+child views/controllers from the main navigation menu
可接受的答案很好,但是后来当我动态添加第二个"childRoute"时,我发现了一个问题.为了动态构建导航,我必须添加具有相同"route"属性的多条路线. (请参见下面的示例代码中的app.js).唯一的区别是标题"和设置"属性.
The accepted answer is great, but later when I added a 2nd "childRoute" dynamically, I noticed a problem. In order to build my navigation dynamically I had to add the multiple routes with the same "route" attribute. (see app.js in the example code below). The only difference were the "title" and "settings" attributes.
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;
}
我在视图中用于执行此操作的设置属性:
The settings attribute I used in the view for doing this:
<a if.bind="row.settings.childRoute" href.bind="row.href + '/' + row.settings.childRoute">${row.title}</a>
我知道它并不漂亮,但确实可以导航到正确的子路线.问题在于,总是两个具有重复"route"属性的路由中的最后一个被标记为活动.
I know it's not pretty but it does navigate to the right child route. The problem is that it's always the last of the 2 routes with duplicate "route" attributes that is marked as active.
之所以我添加settings: {childRoute: 'child-a/b' }
而不是给它们提供诸如route: 'shared-parent/child-a'
和route: 'shared-parent/child-b'
之类的不同路由"属性的原因是,因为我们首先进行链接,所以该网址实际上会匹配shared-parent/child-a/child-a
和shared-parent/child-b/child-b
到共享的父母.
The reason why I added the settings: {childRoute: 'child-a/b' }
instead of giving them distinct "route" attributes like route: 'shared-parent/child-a'
and route: 'shared-parent/child-b'
was that the url would actually then match shared-parent/child-a/child-a
and shared-parent/child-b/child-b
since we're first linking to the shared-parent.
此可实时运行的要点应该清楚地显示问题(子路径永远不会激活):
This live runnable gist should clearly display the problem (child-a route never activating): https://gist.run/?id=95469a9cb3a762d79da31e0b64248036
Ps. 如果您对这个问题的标题有更好的了解,请随时对其进行编辑.
Ps. If you have a better idea of what to call the title of this question please feel free to edit it.
推荐答案
因此,我在子视图模型的激活生命周期"钩子中使用EventAggregator来刺探您的问题.
So I took a stab at your problem using the EventAggregator in the Activate lifecycle hook in the child view models.
https://gist.run/?id=bfb5df5e39ac0bb73e9e1cae2d2496e2
在子视图模型中,我刚刚发布了一个事件,指出子路线已更新:
in the child view models, I just published an event stating the child route was updated:
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属性:
In the app.js file, I updated the route titles, and added an activeChild property. Next, update the activeChild property when the event is captured:
constructor(aggregator) {
this.aggregator = aggregator;
this.aggregator.subscribe("child route updated", payload => {
this.activeChildRoute = payload;
console.log(this.activeChildRoute);
});
}
最后,我更新了您列表项上的类表达式,以根据该活动子标志进行更新:
Finally, I updated the class expression on you list item to update based on that active child Flag:
<li repeat.for="row of router.navigation"
class="${row.title === activeChildRoute ? 'active' : ''}">
这篇关于如何从链接到父/子视图/控制器的路线动态构建导航菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!