首页 文章

Angular2命名路由器无法正常工作

提问于
浏览 次
0

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'}
angular angular2-routing

1 回答

  • 0

    这段代码的问题

    { 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加载到插座中 .

    这是更正的羽毛球：https://plnkr.co/edit/MXi8p7rr15Bul1US9qbc?p=preview

    回复于

相关问题