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 显示正常
• /contacts 显示正常
• /emails(aux:auxiliary) 加载时显示良好
• /contacts(aux:auxiliary) 加载时显示良好

辅助在 URL 中时，第一次到达就可以了。
但是，如果我点击 <a [routerLink]="['emails']">Emails</a>，即使 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

编辑：

这里有一个 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 处理。