Question

使用Angular 2，我可以制作一个子路线渲染＆＃34; over＆＃34;它的父级通过定义一个空的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 {em}兄弟而不是孩子来完成此操作，但这在我的应用程序中在逻辑上并不正确，并且会破坏我的面包屑。

有没有正确的方法来处理这种模式，或者我是否需要选择一种解决方法，例如showing and hiding the intended route或manually specifying a dedicated "main" outlet for every link？

唯一现有的解决方案是define a dummy parent component，但这只能降低一级。如果我的详细信息页面有另一个也应该替换master的子详细信息页面，则会非常混乱。

我是否可以设置任何路由级别标志或设计模式来优雅地完成此操作？我是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

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

1 个答案: