TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超8個(gè)贊
通過配置路由器并為路由器插座提供名稱，您可以在同一模板中具有多個(gè)路由器插座，您可以按以下步驟實(shí)現(xiàn)。
以下方法的優(yōu)點(diǎn)是，您可以避免URL看起來很臟。例如：/ home（aux：login）等。
假設(shè)負(fù)載，您正在引導(dǎo)appComponent。
app.component.html
<div class="layout">
<div class="page-header">
//first outlet to load required component
<router-outlet name='child1'></router-outlet>
</div>
<div class="content">
//second outlet to load required component
<router-outlet name='child2'></router-outlet>
</div>
</div>
將以下內(nèi)容添加到路由器。
{
path: 'home', // you can keep it empty if you do not want /home
component: 'appComponent',
children: [
{
path: '',
component: childOneComponent,
outlet: 'child1'
},
{
path: '',
component: childTwoComponent,
outlet: 'child2'
}
]
}
現(xiàn)在，在加載/ home時(shí)，appComponent將使用分配的模板進(jìn)行加載，然后角度路由器將檢查路由并根據(jù)名稱在指定的路由器出口中加載子組件。
像上面一樣，您可以將路由器配置為在同一路由中具有多個(gè)路由器出口。
舉報(bào)