javascript - 在 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 的 sibling 而不是 child ，但这在我的申请中在逻辑上是不正确的，并且破坏了我的面包屑。

是否有任何适当的方法来处理这种模式，或者我必须选择一个解决方法，例如 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 中没有"new"路由器。它与 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