如何让Angular的routerLink在激活时跳转至不同链接？

这个需求其实很实用，我给你分享两种优雅的实现思路，你可以根据项目的实际情况选择：

方案一：自定义指令（推荐，复用性强） #

这种方式最适配你的场景，所有链接都在FrameComponent里，自定义一个指令后，只需要给每个链接加上指令属性就能实现需求，不用写重复代码。

步骤1：创建自定义指令 #

生成一个名为RouterLinkRedirectDirective的指令，注入Router和RouterLinkActive服务来监听激活状态和处理导航：

import { Directive, HostListener, Optional } from '@angular/core';
import { Router, RouterLinkActive } from '@angular/router';

@Directive({
  selector: '[routerLink][routerLinkRedirect]'
})
export class RouterLinkRedirectDirective {
  constructor(
    private router: Router,
    // 可选注入RouterLinkActive，确保只有带该指令的链接才生效
    @Optional() private routerLinkActive: RouterLinkActive
  ) {}

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    // 判断当前链接是否处于激活状态
    const isCurrentActive = this.routerLinkActive?.isActive || false;
    
    if (isCurrentActive) {
      event.preventDefault(); // 阻止默认的routerLink跳转行为
      this.router.navigate(['/welcomepage']); // 重定向到欢迎页
    }
    // 如果不是激活状态，默认的routerLink导航会自动执行，无需额外处理
  }
}

步骤2：在模板中使用指令 #

给每个链接添加routerLinkRedirect属性即可：

<a [routerLink]="/page1" [routerLinkActive]="'active'" routerLinkRedirect>Link 1</a>
<a [routerLink]="/page2" [routerLinkActive]="'active'" routerLinkRedirect>Link 2</a>
<a [routerLink]="/page3" [routerLinkActive]="'active'" routerLinkRedirect>Link 3</a>

注意：如果需要精确匹配路由（比如避免子路由激活父路由的链接），可以给routerLinkActive加上精确匹配选项：[routerLinkActiveOptions]="{ exact: true }"

方案二：组件内直接处理点击事件（快速实现） #

如果你的项目里只有FrameComponent有这类链接，不想额外写指令，也可以直接在组件里处理点击事件：

步骤1：修改模板添加点击事件 #

给每个链接绑定点击事件，传入目标路由路径：

<a [routerLink]="/page1" [routerLinkActive]="'active'" (click)="handleNavClick('/page1', $event)">Link 1</a>
<a [routerLink]="/page2" [routerLinkActive]="'active'" (click)="handleNavClick('/page2', $event)">Link 2</a>
<a [routerLink]="/page3" [routerLinkActive]="'active'" (click)="handleNavClick('/page3', $event)">Link 3</a>

步骤2：在组件类中实现处理逻辑 #

注入Router服务，判断当前路由是否和点击的目标路由一致：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-frame',
  templateUrl: './frame.component.html'
})
export class FrameComponent {
  constructor(private router: Router) {}

  handleNavClick(targetRoute: string, event: MouseEvent) {
    // 获取当前路由的路径（去掉查询参数，避免参数影响判断）
    const currentRoute = this.router.url.split('?')[0];
    
    if (currentRoute === targetRoute) {
      event.preventDefault();
      this.router.navigate(['/welcomepage']);
    }
  }
}

方案对比 #

• 自定义指令：优势是复用性极强，后续其他组件有相同需求时，只需添加指令属性即可，代码更简洁易维护。
• 组件内处理：适合快速实现，无需额外创建指令文件，但如果多个组件需要该功能，会产生重复代码。

内容的提问来源于stack exchange，提问作者Rolando