在Angular 4中在父级中渲染子级路线

Question

使用Angular 2，我可以通过定义空path并创建本质上为空的基础组件，使子路径在其父“上方”渲染。 我正在尝试使用新的Angular路由器（版本4.3.1）完成类似的任务，但遇到了障碍。

为了重现我的问题， 这里有一个柱塞。 路由定义为：

[{
    path: '',
    redirectTo: "/master",
    pathMatch: "full"
}, {
    path: 'master',
    component: MasterComponent,
    children: [{
        path: 'detail/:value',
        component: DetailComponent,
        children: [{
            path: 'subdetail',
            component: SubDetailComponent
        }]
    }]
}]

当我导航到详细信息页面时，母版页仍然可见，因为我已经向MasterComponent添加了<router-outlet></router-outlet> 。 我需要用细节替换主视图。 我可以通过使完成这个detail/:value的同级 master ，而不是一个孩子，但是这不是我的应用程序逻辑上正确，打破我的面包屑。

是否有任何适当的方法来处理这种模式，还是我必须选择一种解决方法，例如显示和隐藏所需的路线，或者为每个链接手动指定专用的“主要”出口 ？

唯一可以解决的现有解决方案是定义一个虚拟父组件 ，但这只能向下一级进行。 如果我的详细信息页面有另一个子详细信息页面，该页面也应替换母版页面，则它会变得非常混乱。

有没有我可以设置或设计的路由级别标志来实现这一目标？ 我是Angular 2的初学者，但是我觉得类似这样的事情应该很简单。

Answer 1

首先，4.3.1中没有“新”路由器。 与2.x版本中的路由器相同。

其次，我需要对您的松节器进行一些更改，以使其正常工作。 关键的更改是在master.component.ts中：

<a [routerLink]="['/detail', 5]">

我加了一个斜杠。 没有斜线，它正在寻找一个名为master/detail/5的路由

现在，路线定义是平坦的，因此所有内容都将显示在主标题的“下方”。

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'master',
    pathMatch: 'full'
  },
  {
    path: 'master',
    component: MasterComponent
  },
  {
    path: 'detail/:value',
    component: DetailComponent
  }
];

更新的监听器在这里： https ://plnkr.co/edit/EHehUR6qSi248vQPDntt?p = preview