Angular中routerLinkActive在ng-template+*ngIf下失效原因咨询

这是个很典型的Angular路由指令和模板渲染机制冲突的问题，我来帮你拆解一下原因和解决办法：

这个问题的核心在于Angular的routerLinkActive指令的工作机制和ng-template的惰性渲染特性不兼容：

• routerLinkActive的作用是监听当前元素或其直接/间接子元素上的routerLink指令，当路由匹配时为当前元素添加指定的激活样式。
• 但ng-template是惰性渲染的模板容器，哪怕你的*ngIf条件一开始就是true，模板里的<a>标签也不是在组件初始化阶段就直接渲染到<li>的子树中，而是在变更检测的后续阶段才插入DOM。
• 这就导致<li>上的routerLinkActive在初始化扫描子元素时，找不到对应的routerLink，自然无法建立关联，后续路由切换时也就不会触发样式更新。

这里有两种简单直接的解决方式，根据你的需求选择：

方案1：将routerLinkActive移到<a>标签上 #

既然routerLink在<a>里，直接把激活指令和它放在同一个元素上，就能绕开模板渲染的层级问题：

<h1>Test routerLinkActive</h1>
<ng-template #tpl1>
  <a routerLink="/test1" routerLinkActive="active">Link 1</a>
</ng-template>
<ng-template #tpl2>
  <a routerLink="/test2" routerLinkActive="active">Link 2</a>
</ng-template>
<ul>
  <li>
    <div *ngIf="1===1;then tpl1 else tpl1"></div>
  </li>
  <li>
    <div *ngIf="1===1;then tpl2 else tpl2"></div>
  </li>
</ul>
<router-outlet></router-outlet>

这种方式最直观，激活样式会直接作用在<a>标签上，如果你需要样式作用在<li>上，可以调整CSS选择器（比如.active a），或者用方案2。

方案2：给<li>本身添加routerLink #

让<li>元素直接绑定routerLink，同时保留routerLinkActive，这样不管内部内容是不是来自ng-template，routerLinkActive都能直接监听当前元素的路由状态：

<h1>Test routerLinkActive</h1>
<ng-template #tpl1>
  <a routerLink="/test1">Link 1</a>
</ng-template>
<ng-template #tpl2>
  <a routerLink="/test2">Link 2</a>
</ng-template>
<ul>
  <li routerLinkActive="active" [routerLink]="['/test1']">
    <div *ngIf="1===1;then tpl1 else tpl1"></div>
  </li>
  <li routerLinkActive="active" [routerLink]="['/test2']">
    <div *ngIf="1===1;then tpl2 else tpl2"></div>
  </li>
</ul>
<router-outlet></router-outlet>

这里<a>标签的routerLink可以保留（点击时依然有效），也可以去掉，因为<li>本身已经绑定了路由跳转，点击<li>的任何区域都会触发路由切换。

如果你的场景必须保留routerLinkActive在<li>且routerLink在<a>，还有一种更复杂的方式：在ngAfterViewInit钩子中手动调用routerLinkActive的initialize()方法，强制它重新扫描子元素，但这种方式需要通过ViewChild获取指令实例，不如前两种方案简洁，一般不推荐。

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