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>，即使网址仍为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处理。