Вы можете добиться этого, указав маршрутизатор-выход следующим образом.
Предполагая, что вы сначала загружаются appComponent,
app.component.html
<header></header>
<router-outlet name='content1_r1_r2'><router-outlet/>
<router-outlet name='content1_r3_r4'><router-outlet/>
<router-outlet name='content2'><router-outlet/>
<footer></footer>
настроить маршрутизатор следующим образом:
{
path: 'r1',
component: 'appComponent',
children: [
{ path: '', component: contentr12Component, outlet: 'content1_r1_r2' },
{ path: '', component: contentr1Component, outlet: 'content2' }
]
}
// write same for r2 just change content1Component you want to load on /r2 route.
{
path: 'r3',
component: 'appComponent',
children: [
{ path: '', component: contentr34Component, outlet: 'content1_r2_r4' },
{ path: '', component: contentr3Component, outlet: 'content2' }
]
}
// write same for r4 just change content3Component you want to load on /r4 route.
В приведенном выше коде contentr12Component будет оставаться таким же для маршрутов r1 и r2, contentr34Component останется таким же для r3 и r4. вы можете заменить имена в соответствии с вашим компонентом.
Это позволит избежать уродливого URL-адреса.
«Содержание 1» должно быть в переменной структуре. R1 и r2 должны быть «
»
', а r3 и r4 должны быть«