Angular2命名路由器不起作用答案

【问题标题】：Angular2 Named router not workingAngular2命名路由器不起作用
【发布时间】：2016-10-25 05:43:19
【问题描述】：

https://plnkr.co/edit/x97F91xLv3yNcOhvTwBm?p=preview

在上面的 plunker 中，当前单击菜单中的 Page1 或 Page2 正在将内容加载到未命名的路由器插座中。我如何将它们加载到命名路由器出口（contentOutlet）？

我尝试添加以下内容，但它破坏了页面

在 app.module.ts 中

{ path: 'Page1', component: Page1Component, outlet:'contentOutlet'},

{ path: 'Page2', component: Page2Component, outlet:'contentOutlet'}

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

这段代码的问题

{ path: '', redirectTo: 'Page1', pathMatch: 'full'},
{ path: 'Page1', component: Page1Component, outlet="contentOutlet"},
{ path: 'Page2', component: Page2Component, outlet="contentOutlet"}`

是您无法加载，例如Page1 到一个命名的出口，因为您必须将一个组件加载到未命名的router-outlet 中。此出口不得为空。如果您将根路径 '' 直接重定向到要加载到另一个出口的组件，则没有可用的未命名 router-outlet 的组件。

所以你应该为Pages 创建一个父组件，它总是像这样加载到未命名的router-outlet 中：

{ path: '', component: PagesComponent, pathMatch: 'full'},
{ path: 'Page1', component: Page1Component, outlet: 'contentOutlet'},
{ path: 'Page2', component: Page2Component, outlet: 'contentOutlet'}

您的网点留在AppComponent。

如果您想将Page1 加载到contentOutlet 中，您应该从AppComponent 的模板中这样做：

<a [routerLink]="['/', {outlets: {'contentOutlet': 'Page1' }}]" routerLinkActive="active" >Page1</a>

因此，现在路由器识别出在您的应用程序的/-root 路径中必须有一个名为contentOutlet 的出口。然后他将Page1-Component 加载到插座中。

这是更正后的 plunker： https://plnkr.co/edit/MXi8p7rr15Bul1US9qbc?p=preview

【讨论】：

它很混乱，你推荐一些教程或链接来阅读这个吗？我已更新 plunker 以加载左侧列中的菜单。现在，当我单击 Page1child1 菜单时，我想在内容页面中显示该页面的内容，我需要在这里做些什么。有点想要sears.com上的导航。 1）单击标题中的菜单，它会刷新左侧的子菜单 2）单击左侧的子菜单，它将内容加载到右侧
这个article 对进入指定的路由器出口非常有帮助。
感谢您在这里提供帮助。我有点困惑。您的解决方案的要点似乎是添加'/'，即将{outlets: {'contentOutlet': 'Page2' }} 更改为'/', {outlets: {'contentOutlet': 'Page2' }}。但是，我打开了你的 plunk，它可以双向工作。我正在研究this demo，其中一条路线仅填充命名的“弹出”出口。它可以在演示中使用，但不能在 my adoption of it 中用于更大的应用程序。