我有一个奇怪的问题,似乎没有找到问题。我有一个带有两个视口的子路由器,并希望在通过视口加载的一个组件(菜单)中访问路由器。当我在app.ts中使用视口定义相同的路径时,菜单显示路由条目,但是在子路由器中定义的路由中,路由器变量未定义。我尝试使用viewmodel进行菜单,并将路由器明确绑定到router-view标签,但没有运气。
如果有人可以对此有所了解,那将会很棒。
这样做的原因是我想与管理页面相比,使用这些视口创建不同的页面布局。但是,我不确定这种分离是否真的是一个很好的方法。也许我可以简单地为管理页面设置侧视口为null。但是我认为这需要一些CSS重写。
app.ts
config.map([
{
route: ['', 'child'],
name: 'child',
moduleId: 'child/child',
},
{
route: 'admin',
name: 'admin',
moduleId: 'admin/admin,
},
]);
this.router = router;
子视图
<template>
[...]
<router-view name="side"></router-view>
<router-view name="main"></router-view>
</template>
child vm
export class Child{
private router: Router
private configureRouter(config: RouterConfiguration, router: Router){
config.map([
{
route: 'myOrders',
name: 'myOrders',
nav: true,
viewPorts: {
main: { moduleId: 'components/some-vm/some-vm' },
side: { moduleId: 'components/menu/menu.html' }
}
},
{
route: ['', 'allorders'],
name: 'allorders',
nav: true,
viewPorts: {
main: { moduleId: 'components/orders-table/orders-table' },
side: { moduleId: 'components/menu/menu.html' }
}
}
]);
this.router = router;
}
}
菜单视图
<template>
[...]
${router} <!-- router is never accessible -->
<ul class="nav">
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a href.bind="row.href">${row.title}</a>
</li>
</ul>
</template>
答案 0 :(得分:1)
router-view
内的绑定上下文未与父绑定上下文合并。您可能可以执行$parent.router
(未经过测试),但只需在菜单视图的构造函数中注入Router
即可。
澄清一下:每个子路由器都会获得自己的子容器。由该子路由器加载的组件将从该子容器解析其依赖项。 Router
和Element
之类的内容会自动注册到该子容器中,这意味着您始终可以获得最内层的&#34;或者&#34;最近的&#34;相对于您从中请求的组件的实例。
因此,如果您在Router
中注入App
,那么您将获得根(AppRouter
),如果您在菜单视图中将其注入,那么您就可以了得到你需要的子路由器。