我正试图在组件中包括一个“特殊的”路由器出口。
这是app.component.html:
<div fxFlexFill fxLayout="column">
<header fxFlex="40px">
<router-outlet name="header"></router-outlet>
</header>
<router-outlet></router-outlet>
</div>
每个都用于一个不同的路由文件,第一个进入header.routing.ts,第二个进入app.routing.ts。
有可能吗?如何链接任何路由器及其文件?
答案 0 :(得分:1)
是的,可以使用,角度提供的出口功能,下面是一个伪示例
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="container-fluid">
<div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<div class="col-12">
<router-outlet name="left"></router-outlet>
</div>
</div>
<div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<div class="col-12 sm-12 md-12 xs-12 lg-12">
<router-outlet name="right"></router-outlet>
</div>
</div>
</div>
</main>
和路线文件中-
const appRoutes: Routes = [{
path: '', redirectTo: 'processi', pathMatch: 'full',
children: [
{ path: '', component: TeamDashboardComponent, outlet: 'left' },
{ path: '', component: ChatroomComponent, outlet: 'right' }
]
},
. . .
. . . .
. . . . .
}]
如果您对此有任何疑问,请告诉我。.