在Angular 4的父级中渲染子路由

Question

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

为了重现我的问题，here's a Plunker. 路由定义为：

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

当我导航到详细信息页面时，母版页仍然可见，因为我已将 <router-outlet></router-outlet> 添加到 MasterComponent。我需要的是用细节替换主视图。我可以通过使detail/:value 成为master 的兄弟而不是孩子来实现这一点，但这在我的应用程序中逻辑上不正确，并且会破坏我的面包屑。

是否有任何适当的方法来处理这种模式，或者我必须选择一种解决方法，例如showing and hiding the intended route 或manually specifying a dedicated "main" outlet for every link？

现有的唯一接近的解决方案是define a dummy parent component，但这仅适用于下一级。如果我的详细信息页面有另一个子详细信息页面也应该替换主页面，它会变得非常混乱。

我可以设置任何路由级别的标志或设计模式来实现优雅地完成此任务吗？我是 Angular 2 的初学者，但我觉得这样的事情应该很简单。

Answer 1

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

其次，我需要对您的 plunker 进行一些更改，以使其正常工作。 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
  }
];

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