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

我有一个奇怪的问题，似乎没有找到问题所在。我有一个具有两个视口的子路由器，希望访问通过视口加载的其中一个组件（菜单）中的路由器。当我使用app.ts中的视口定义相同的路由时，菜单将显示路由条目，但对于子路由器中定义的路由，路由器变量未定义。我尝试了菜单的viewmodel，也尝试了将路由器显式绑定到路由器视图标记，但没有成功

如果有人能解释一下，那就太好了

这样做的原因是，与管理页面相比，我希望使用这些视口创建不同的页面布局。然而，我不确定这种分离是否真的是一种好方法。也许我可以简单地将管理员页面的侧视口设置为空。但我相信这需要一些CSS重写

应用程序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>

<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>

菜单视图

<template> 
  [...]
  <router-view name="side"></router-view>

  <router-view name="main"></router-view>
</template>

<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>

[...]
${router}




路由器视图中的绑定上下文未与父绑定上下文合并。您可能可以执行
$parent.router
（未对此进行测试），但最好在菜单视图的构造函数中插入
router

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

因此，如果您在
应用程序中插入
路由器
，您将获得根（
AppRouter
），如果您将其插入菜单视图，您将获得所需的子路由器。
感谢您的澄清。我想我已经试过注入路由器，但不太确定。等我有时间的时候我会试试的。谢谢。您需要注意的主要一点是，注入的路由器将是加载您注入的ViewModel的路由器，而您从
configureRouter（）
获得的路由器将是注入路由器的子路由器。他们不是同一个人。你可能已经尝试在你的根（应用程序）中注入路由器，但这永远不会起作用，因为该应用程序是创建根路由器的应用程序。听起来不是一个最佳方法。考虑使用构词。