首页 文章

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

提问于
浏览 次
-1

使用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”路线 .

如果用户点击链接将他们带到/ page2，如果用户尝试点击“链接1”，则会将他们带到“/ page1” . 仅当用户已经激活了路由时，具有routerLink的按钮才会重定向用户，如果他们点击相同的按钮则导航到“/ welcomepage” .

做这个的最好方式是什么？

angular

2 回答

  • 0

    代替

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

    去做

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

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

    EDIT 导航方法的示例代码 -

    // 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}`]);
    }
}
    回复于
  • 0
    <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>
    回复于

相关问题