Aurelia - 无法访问具有视口的子路由器中的路由器

时间:2018-04-05 15:50:26

标签: typescript aurelia aurelia-router

我有一个奇怪的问题,似乎没有找到问题。我有一个带有两个视口的子路由器,并希望在通过视口加载的一个组件(菜单)中访问路由器。当我在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>

1 个答案:

答案 0 :(得分:1)

router-view内的绑定上下文未与父绑定上下文合并。您可能可以执行$parent.router(未经过测试),但只需在菜单视图的构造函数中注入Router即可。

澄清一下:每个子路由器都会获得自己的子容器。由该子路由器加载的组件将从该子容器解析其依赖项。 RouterElement之类的内容会自动注册到该子容器中,这意味着您始终可以获得最内层的&#34;或者&#34;最近的&#34;相对于您从中请求的组件的实例。

因此,如果您在Router中注入App,那么您将获得根(AppRouter),如果您在菜单视图中将其注入,那么您就可以了得到你需要的子路由器。