如何在routerLinkActive中绑定函数且避免函数被无限调用？

• 无限调用是因为Angular变更检测机制：模板中绑定的函数会在每一轮变更检测时被执行，页面渲染、用户交互、异步事件触发都会触发变更检测，所以函数会被反复调用，性能损耗很高。
• 类无法添加有两个原因：一是routerLinkActive的正确用法是直接传入要激活的类名，由内部逻辑匹配路由后自动添加，不支持传入三元表达式做自定义判断；二是你用window.location.pathname获取路径脱离了Angular路由体系，路由切换时不会触发模板重渲染，自然无法更新类的状态。

方案1：直接使用routerLinkActive原生能力（优先推荐） #

绝大多数场景下不需要自定义路由匹配逻辑，routerLinkActive本身就会自动匹配当前路由并添加指定类：
HTML代码：

<a routerLink="/home" target="_self" routerLinkActive="active">

如果需要精确匹配完全一致的路由才加类，添加配置即可：

<a routerLink="/home" target="_self" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">

方案2：有自定义匹配逻辑的场景，用变量存储激活状态 #

如果确实需要校验URL中是否存在指定词汇这类自定义逻辑，不要在模板中绑定函数，改为监听路由事件预计算激活状态存在变量中，模板直接绑定变量即可：
.ts文件代码：

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

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  // 存储所有路由的激活状态，key为路由标识，value为是否激活
  activeStatus: Record<string, boolean> = {};

  constructor(private router: Router) {
    // 只在路由跳转结束时计算一次激活状态
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 用Angular路由提供的路径计算，不要用window.location
        const pathSeg = event.urlAfterRedirects.split('/')[2] || '';
        // 可批量计算所有需要校验的路由状态
        this.activeStatus['home'] = pathSeg === 'home';
        // 其他路由同理，比如this.activeStatus['about'] = pathSeg === 'about'
      }
    })
  }
}

对应的HTML代码，直接用类绑定即可，不需要硬套routerLinkActive：

<a routerLink="/home" target="_self" [class.active]="activeStatus['home']">

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