angular2-routing - Angular2 : Link from one child to another, 同级

Question

我有一个父组件 A 和一个子组件 B，A 引用 B，如下所示:

@RouteConfig([
{
  path: '/screen-b/...',
  name: 'ScreenB',
  component: ScreenBComponent
}
])

B 有一个路由器 socket 和三个子组件，定义如下:

@RouteConfig([
  {
    path: '/screen-aa',
    name: 'ScreenAA',
    component: ScreenAAComponent,
    useAsDefault: true
  },
  {
    path: '/screen-bb',
    name: 'ScreenBB',
    component: ScreenBBComponent
  },
  {
    path: '/screen-cc',
    name: 'ScreenCC',
    component: ScreenCComponent
  }
])

当在组件 B 的模板中，我放入这样的链接时，子组件 AA、BB 和 CC 在 B 的路由器导出中显示得很好:

<a [routerLink]="['ScreenAA']">Screen AA</a>
<a [routerLink]="['ScreenBB']">Screen BB</a>
<a [routerLink]="['ScreenCC']">Screen CC</a>

但是，当我将相同的链接放入 AA、BB 或 CC 中以相互链接时，没有任何反应(尽管地址栏中的 URL 确实发生了变化)。我猜测这是因为 AA、BB、CC 本身没有路由器导出，而这正是 Angular2 想要放置它们的地方。

似乎只能在层次结构中向下路由，并且始终只能在较低级别的路由器导出中进行，而永远不能到达同一级别或更高级别。如何实现这个对大多数网站来说至关重要的功能？

我所需要的只是能够在组件内部单击，然后将该组件替换为其他组件，而不是在较低级别的路由器导出中打开某些组件。

Answer 1

你必须将router-outlet放在你想通过路由加载一些内容的每个组件中，其次我认为你必须使用这样的代码才能使事情正常工作。

<a [routerLink]="['../ScreenAA']">Screen AA</a>
<a [routerLink]="['../ScreenBB']">Screen BB</a>
<a [routerLink]="['../ScreenCC']">Screen CC</a>

因为根据您的问题，您的组件 B 有一个子组件，而对于这些子组件 B 现在是父组件，因此通过在 url 前面添加 ../ 所以，如果路由以 ../ 开头，路由器将查看当前组件的父组件。

来自 Angular 官方

The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.