Question

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

Answer 1

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

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

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

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

1 个答案: