Angular2: Маршрутизаторы и вспомогательные маршруты

Question

Я играю с дополнительными маршрутами Angular2, и я ничего не могу понять.

Скажем, у нас есть основное почтовое приложение с некоторыми контактами.

В принципе, мой HTML выглядит следующим образом:

<div> 
    <a [routerLink]="['emails']">Emails</a> 
    <a [routerLink]="['contacts']">Contacts</a> 
    <a [routerLink]="[{outlets: {aux: ['auxiliary']}}]">Open an auxiliary route</a> 
</div> 

<router-outlet></router-outlet> 
<router-outlet name="aux"></router-outlet> 

До сих пор это почти отлично.

• /emails является diplaying тонкой
• /contacts является diplaying тонкой
• /emails(aux:auxiliary) является diplaying тонкой при загрузке
• /contacts(aux:auxiliary) является diplaying тонкой при загрузке

Когда вспомогательный в URL, это нормально, когда мы добраться до него.
Но тогда, если я нажму на <a [routerLink]="['emails']">Emails</a>, мой Aux-выход больше не отображается, даже если URL-адрес по-прежнему http://localhost:4200/emails(aux:auxiliary).

Так что мой вопрос в том, как изменить основной URL-адрес, не меняя вспомогательные маршруты? (если нет вспомогательных, просто перейдите на новый URL-адрес, если он используется, перейдите в URL + вспомогательный).

Я пробовал:

<a [routerLink]="['emails', {outlets: {aux: ['/']}}]">Emails</a> 
<a [routerLink]="['contacts', {outlets: {aux: ['/']}}]">Contacts</a> 

, а также

<a [routerLink]="['emails', {outlets: {aux: ['./']}}]">Emails</a> 
<a [routerLink]="['contacts', {outlets: {aux: ['./']}}]">Contacts</a> 

Но это не работает, либо.

Спасибо за помощь!

PS: Если вы хотите попробовать это самостоятельно, мой тест на Github:

git clone https://github.com/maxime1992/angular2-nrgx-demo.git 
git checkout auxiliary-route 
npm i 
ng serve 

И просто посмотрите на следующий адрес: http://localhost:4200/emails

EDIT:

Вот демон GIF, чтобы продемонстрировать проблему:

Answer 1

Вы можете позаботиться об этом сценарии с помощью фиктивного маршрута,

Причина использования фиктивного маршрута - это когда вы переключаетесь с/emails (aux: вспомогательный) на/электронные письма. Угловой не перезагружает компонент, поскольку основной путь одна и та же. поэтому вам необходимо принудительно перезагрузить компонент.

<a (click)="changeRoute(url)"> 

Добавьте один фиктивный маршрут к маршрутизатору:

{ path: 'dummy', component: dummyComponent } 

dummyComponent.ts

//Dummy component for route changes 

@Component({ 
    selector: 'dummy', 
    template: '' 
}) 
export class dummyComponent{} 

Теперь внутри компонента добавить changeRoute функция:

changeRoute => (url){ 
    self.router.navigateByUrl('/dummy', { skipLocationChange: true }); 
    setTimeout(()=>self.router.navigate(['emails',{outlets: {aux: null}}])); 
} 

// {outlets: {aux: null}} this will set your outlet to null and clean your url to /emails 
// 'skipLocationChange' will avoid /dummy to go into history API 

Это будет ваш компонент, и все остальное позаботится об Угловом.