Угловая 2 Вспомогательная маршрутизация между братьями и сестрами с routerLink

Question

Вот как выглядят мои маршруты. Следует отметить, что все по умолчанию/пустые маршруты работают правильно при загрузке страницы.

const routeConfig = [ 
    { 
    path:'', component:HomeComponent, 
    children: [ 
     { path:'', component:ContractsComponent }, 
     { path:'contracts', component:ContractsComponent }, 
     { path:'research', component:ResearchComponent}, 

     { path:'', outlet:'right-panel', component:PlanetComponent }, 
     { path:'wtf', outlet:'right-panel', component:WTFComponent } 
    ] 
    } 
]; 

У меня есть ссылка, расположенная в ContractsComponent, который имеет routerLink, который выглядит следующим образом:

[routerLink]="[{outlets: {'right-panel':['wtf']}}]" 

Я хотел бы, чтобы сделать выход правой панели показывает WTFComponent. Но все, что я получаю, это ошибка, говорящая, что она не может соответствовать никаким маршрутам.

Что я пропустил? или routerLink просто не работает со вспомогательными маршрутами?

Answer 1

После долгих боя, я обнаружил, что это то, что работает в моей конкретной ситуации:

[routerLink]="{outlets: {'right-panel':'wtf'}}" 

Функционирующая программная версия является следующим образом:

this.router.navigateByUrl('home/(contracts//right-panel:wtf)'); 

И мой routeConfig будет выглядеть так:

const routeConfig = [ 
    { path:'', redirectTo: 'home', pathMatch: 'full'}, 
    { 
    path:'home', component:HomeComponent, 
    children: [ 
     { path:'', component:ContractsComponent }, 
     { path:'contracts', component:ContractsComponent }, 
     { path:'research', component:ResearchComponent}, 

     { path:'', outlet:'right-panel', component:PlanetComponent }, 
     { path:'wtf', outlet:'right-panel', component:ContractComponent } 
    ] 
    } 
]; 

Answer 2

Я обнаружил, что указание текущего (первичного) маршрута как первой части массив, переданный в [routerLink], а также массив опций, в котором вы указываете конфигурацию выхода, позволяет перейти на один и тот же выход.

например. используя маршрут конфигурации Ор в:

const routeConfig = [ 
    { 
    path:'', component:HomeComponent, 
    children: [ 
     { path:'', component:ContractsComponent }, 
     { path:'contracts', component:ContractsComponent }, 
     { path:'research', component:ResearchComponent}, 

     { path:'', outlet:'right-panel', component:PlanetComponent }, 
     { path:'wtf', outlet:'right-panel', component:WTFComponent } 
    ] 
    } 
]; 

и предполагая, что «правильный панели» на выходе в настоящее время отображения PlanetComponent:

[routerLink]="[ '', { outlets: { 'right-panel': 'wtf' } } ]" 

пустая строка первого аргумента массива означает «основной маршрут должен оставаться одним и тем же », в то время как маршрут сестры в именованной рознице изменяется конфигурацией выходов в объекте опций.