Question

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

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

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

app.module.ts中的

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

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

Answer 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>

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

这是经过纠正的修正器： https://plnkr.co/edit/MXi8p7rr15Bul1US9qbc?p=preview

Angular2命名路由器不工作

1 个答案: