Question

我有一个父组件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想要放置它们的地方。

似乎只能在层次结构中进行路由，并且始终只在较低级别的路由器出口中，但从不到同一级别或更高级别。如何实现对大多数网站至关重要的功能？

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

Answer 1

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

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

因为根据您的问题，您的组件B具有子组件，并且对于那些chil组件B component现在是父组件，因此通过在../前面添加url，如果路由开始于../路由器将查看当前组件的父级。

来自有角色的官员

第一个路径名称应以/，。/或../为前缀。如果路由以/开头，则路由器将从应用程序的根目录查找路由。如果路由以./开头，则路由器将查找当前组件的子路由。如果路由以../开头，路由器将查看当前组件的父节点。

Answer 2

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

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

链接开始工作。

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

2 个答案: