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

使用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>

链接1
链接2
链接3

此链接在“FrameComponent”中的所有页面上都可用，其中页面上有一个可更改的路由器出口。我想这样做，如果用户点击“链接1”并转到路由/页面1。。。然后再次单击子“链接1”，而不是尝试转到“/page1”，而是转到“/welcomepage”。这应该适用于页面上的每个链接

例如，如果用户单击/page2，它会将他们带到该路由，并且链接处于“活动”状态，但如果用户再次单击“链接2”，它会将他们带回到“/welcomepage”路由

如果用户单击链接将他们带到/page2，如果用户尝试单击“链接1”，则会将他们带到/page1。只有当用户已经激活了一个路由，在该路由中，如果用户单击了相同的按钮，则具有routerLink的按钮将重定向用户以导航到“/welcomepage”

执行此操作的最佳方法是什么？

<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>

链接1


链接2


链接3

而不是

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

---

您能否显示此函数处理导航时的外观？是否有某种方法以编程方式触发RouterLink active class active，以突出显示是否处于活动状态，如果“在活动状态下再次单击”，则突出显示是否处于非高光状态？似乎很复杂，如果我说10个链接，我必须有一个数组来跟踪每一个。

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

// 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}`]);
    }
}