Question

使用angular2 / 4/5/6路由器，我有多个链接：

<a [routerLink]="/page1" [routerLinkActive]="class here">Link 1</a>
<a [routerLink]="/page2" [routerLinkActive]="class here">Link 2</a>
<a [routerLink]="/page3" [routerLinkActive]="class here">Link 3</a>

此链接在“FrameComponent”中的所有页面上都可用，其中页面上的路由器插座会发生变化。我想这样做，如果用户点击“链接1”并转到路线/ page1 ...然后再次单击儿子“链接1”，而不是尝试转到“/ page1”，它会转到“ / welcomepage”。这应该适用于页面上的每个链接。

例如，如果用户点击/ page2，则会将他们带到该路线并且该链接处于“有效”状态，但如果用户再次点击“链接2”，则会将他们带回“/ welcomepage“route。

如果用户点击链接将他们带到/ page2，如果用户尝试点击“链接1”，则会将他们带到“/ page1”。只有当用户已经激活了一条路线时，如果用户点击了同一个按钮，那么拥有routerLink的按钮会重定向用户导航到“/ welcomepage”。

这样做的最佳方式是什么？

Answer 1

<li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/page1']">Link 1</a>
</li>
<li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/page2']">Link 2</a>
</li>
<li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/page3']">Link 3</a>
</li>

Answer 2

而不是

 <a [routerLink]="/page1" [routerLinkActive]="class here">Link 1</a>

转到

<a (click)=“navigate('page1')” [routerLinkActive]="class here">Link</a>

在导航功能中编写逻辑。是否在当前路由不是page1时将路由更改为page1;如果当前路由是page1，则更改为homePage

修改导航方法的示例代码 -

// Import Router and provide it in the cosntructor as router public navigate(path: string): void { if(this.router.url.includes(path) { this.router.navigate(['/welcomepage']); } else { this.router.navigate([`/${path}`]); } }

如何让routerLink在激活时转到其他链接？

2 个答案: