Angular13+TypeScript如何在ngOnInit中为所有routerLink添加查询参数

不要直接照搬jQuery操作DOM改href的思路，不符合Angular的设计规范，下面按推荐优先级给三种可落地方案：

方案1：模板层原生绑定（首选，零侵入、稳定性最高） #

Angular原生的RouterLink指令本身就支持追加查询参数，不需要硬改路由字符串，直接在模板里绑定固定参数即可，后续维护成本最低：

<nav class="menu-links">
    <ul class="postlogin">        
        <li><a [routerLink]="'/passenger/home'" [queryParams]="{pi: '160016'}" routerLinkActive="active">Home</a></li>
        <li><a [routerLink]="'/passenger/myride'" [queryParams]="{pi: '160016'}" routerLinkActive="active">My Ride</a></li>
        <li><a [routerLink]="'/passenger/profile'" [queryParams]="{pi: '160016'}" routerLinkActive="active">Profile</a></li>       
    </ul> 
</nav>

如果不想每个标签都写重复的参数值，可以在组件类里抽成公共属性：

// 组件类中定义
commonQuery = { pi: '160016' };

模板里直接替换成[queryParams]="commonQuery"就行，后续要改参数值只需要修改一处。

方案2：自定义指令统一扩展（适合菜单项多、不想逐改模板的场景） #

如果你的导航链接数量很多，逐个加queryParams太麻烦，可以写一个自定义指令自动给所有带routerLink的元素追加参数，一次配置之后所有现有和新增的导航链接都会自动带上参数，不需要改业务模板：

1. 新建公共指令：

import { Directive, Input } from '@angular/core';
import { RouterLink } from '@angular/router';

@Directive({
  selector: 'a[routerLink]', // 自动匹配所有带routerLink的a标签
})
export class AppendPiParamDirective {
  constructor(private routerLink: RouterLink) {}

  ngOnInit(): void {
    // 自动追加固定pi参数，不会覆盖原有其他查询参数
    this.routerLink.queryParams = {
      ...this.routerLink.queryParams,
      pi: '160016'
    };
  }
}

2. 把这个指令声明到你当前页面所属的模块中即可，原有模板不用做任何修改，路由跳转、routerLinkActive高亮功能都能正常运行。

方案3：ngOnInit中通过Renderer2实现（兼容原有jQuery思路，非必要不推荐） #

如果你一定要把逻辑写在ngOnInit生命周期里，不要直接操作原生DOM或者引入jQuery，用Angular内置的Renderer2服务处理，避免跨平台渲染兼容问题：

1. 先给导航的ul标签加模板引用变量，方便定位元素：

<ul class="postlogin" #navList>

2. 组件类中实现逻辑：

import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';

@Component({
  // 你的组件配置项
})
export class HeaderComponent implements OnInit {
  @ViewChild('navList') navList!: ElementRef;
  private readonly fixedParam = '?pi=160016';

  constructor(private renderer: Renderer2) {}

  ngOnInit(): void {
    const linkNodes = this.navList.nativeElement.querySelectorAll('a[routerLink]');
    linkNodes.forEach((linkEl: HTMLAnchorElement) => {
      const originLink = linkEl.getAttribute('routerLink');
      // 加判断避免重复追加参数
      if (originLink && !originLink.includes('pi=160016')) {
        this.renderer.setAttribute(linkEl, 'routerLink', originLink + this.fixedParam);
      }
    });
  }
}

注意：这种直接修改静态属性的方式对变更检测时机有要求，稳定性弱于前两种方案，仅作为兼容兜底方案使用。

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