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

Question

我有一个奇怪的问题，似乎没有找到问题所在。我有一个带有两个视口的子路由器，并且想在通过视口加载的组件（菜单）之一中访问路由器。当我使用 app.ts 中的视口定义相同的路由时，菜单会显示路由条目，但是在子路由器中定义的路由中，路由器变量是未定义的。我尝试使用菜单的视图模型并将路由器显式绑定到路由器视图标签，但没有运气。

如果有人能对此有所了解，那就太好了。

这样做的原因是，与管理页面相比，我想使用这些视口创建不同的页面布局。但是我不确定这种分离是否真的是一个好的方法。也许我可以简单地将管理页面的侧视口设置为空。但我相信这需要一些 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>

子虚拟机

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>

Answer 1

router-view 中的绑定上下文未与父绑定上下文合并。您可能可以使用$parent.router（未对此进行测试），但最好在菜单视图的构造函数中简单地注入Router。

澄清一下：每个子路由器都会有自己的子容器。由该子路由器加载的组件将从该子容器解析其依赖项。 Router 和 Element 之类的东西会自动注册到该子容器，这意味着您将始终获得相对于您从中请求它的组件的“最里面”或“最近”的实例。

因此，如果您在 App 中注入 Router，您将获得根 (AppRouter)，如果您在菜单视图中注入它，您将获得所需的子路由器。