呈现在父项的子路线角4

Question

具有角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