3 回答

TA貢獻1772條經驗 獲得超8個贊
通過配置路由器并為路由器插座提供名稱,您可以在同一模板中具有多個路由器插座,您可以按以下步驟實現。
以下方法的優點是,您可以避免URL看起來很臟。例如:/ home(aux:login)等。
假設負載,您正在引導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>
將以下內容添加到路由器。
{
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'
}
]
}
現在,在加載/ home時,appComponent將使用分配的模板進行加載,然后角度路由器將檢查路由并根據名稱在指定的路由器出口中加載子組件。
像上面一樣,您可以將路由器配置為在同一路由中具有多個路由器出口。
- 3 回答
- 0 關注
- 1089 瀏覽
添加回答
舉報