Angular不同区块相同routerLink如何单独触发routerLinkActive类

Angular项目中存在两个功能区块：固定工具区（pinned tools section）、全部工具区（all tools section），两个区块内都配置了指向相同路由路径的routerLink。

• 预期效果：点击某一区块的菜单链接时，仅为当前区块内的对应元素添加routerLinkActive激活类
• 实际问题：点击任意区块的链接跳转后，固定工具区、全部工具区中匹配同路由的元素都会被加上激活类

全部工具区代码 #

<ul class="dropdown-list" id="parentdrop{{i}}">
  <li class="custommy" *ngFor="let subitem of item.submenus; let j = index;" id="clickedSubMenu{{j}}" (click)="expandSubMenu($event,j,i)">
    <a 
      [routerLink]="['/app/' + subitem.menu.split(' ').join('').replace('-','')]" 
      [routerLinkActive]="['allToolsActive']" 
      (click)="alltoolsCheckClick(subitem.id, subitem.menu)" 
      id="clickedSMenu{{i}}"
    >
      {{subitem.menu}}
    </a>
  </li>
</ul>

固定工具区代码 #

<div 
  id="{{sub.id}}" 
  class="pinnedtools__list" 
  [routerLink]="['/app/' + sub.menu.split(' ').join('').replace('-','')]" 
  [routerLinkActive]="['active']" 
  #rla1="routerLinkActive" 
  (click)="pinnCheckClick(sub.id, sub.menu!==' '?sub.menu:sub.category)"
>
  <span>
    <img src='{{ "/src/assets/icons/" + sub.category + ".svg" }}' class="pinnedmenu__img__icon" />
  </span>
  <div class="navList__subheading-title">
    <span class="sub_category">{{sub.category}}</span>
    <div>{{sub.menu}}</div>
  </div>
</div>

routerLinkActive指令的默认激活逻辑只校验当前浏览器URL和绑定的路由路径是否匹配，不会感知链接所属的页面区块。只要路由路径和当前地址一致，页面上所有绑定了该路由的routerLinkActive指令都会自动触发、添加配置的激活类，这是框架的默认设计，不属于语法错误。

推荐使用第一种方式，侵入性最低、逻辑最可控：

• 独立维护各区块的激活状态：不单独依赖routerLinkActive的自动匹配逻辑，分别为两个区块声明独立的激活项ID变量。点击对应区块的菜单项时，记录当前点击项的唯一ID，通过[ngClass]做判断：只有当前项ID和区块内记录的激活ID一致时，才添加对应的激活类。
• （可选）跳转追加来源参数：如果业务允许地址栏携带额外参数，可以给两个区块的跳转链接分别追加不同的查询参数（比如固定工具区带?entry=pinned、全部工具区带?entry=all），同时配置routerLinkActive的匹配规则校验查询参数，只有参数匹配时才触发激活样式。

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