Angular2：在同一级别上从一个孩子链接到另一个孩子答案

【问题标题】：Angular2: Link from one child to another, on the same levelAngular2：在同一级别上从一个孩子链接到另一个孩子
【发布时间】：2016-04-07 15:45:53
【问题描述】：

我有一个父组件 A 和一个子组件 B，A 像这样引用 B：

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

B 有一个路由器出口和三个子组件，定义如下：

@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 想要放置它们的地方。

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

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

【问题讨论】：

标签： angular2-routing

【解决方案1】：

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

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

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

来自angular官方

第一个路由名称应以 /、./ 或 ../ 开头。如果路由以 / 开头，路由器将从应用程序的根目录查找路由。如果路由以 ./ 开头，路由器将改为在当前组件的子组件中查找路由。如果路由以 ../ 开头，路由器将查看当前组件的父级。

【讨论】：

问题是我试图让一个组件横向导航，进入父级的路由器出口，而不是它自己的。 “../”在这种情况下不起作用，但带有“/”的完整路径具有相同的效果（没有导航更改；只有地址栏）。我不敢相信这似乎是不可能的。这是我的规范所要求的，而且看起来非常重要。

【解决方案2】：

从我试图链接的页面中删除了以下内容：

directives: [RouterOutlet, ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS,
]

链接开始起作用了。

【讨论】：