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细网址，这是我们第一次达到。
但是，如果我点击<a [routerLink]="['emails']">Emails</a>，即使URL仍然是http://localhost:4200/emails(aux:auxiliary)，我的aux插口不再显示。

所以我的问题是，我们如何更改主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

编辑：

下面是一个GIF来演示问题：

Answer 1

您可以通过使用虚拟路由来照顾这种情况，

使用虚拟路由的原因是从/ emails（aux：auxiliary）切换到/ emails Angular不会重新加载组件，因为主路径是相同。所以你需要强制重新加载组件。

<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 

这将重新渲染你的组件和休息都将由Angular照顾。