routerLink置于独立组件时父元素routerLinkActive不生效如何解决

问题原因 #

Angular的routerLinkActive指令默认只检测直接子节点中的routerLink激活状态，你将链接封装为独立子组件后，routerLink位于子组件内部，父层级的routerLinkActive无法跨组件检测到内部路由的激活状态，因此不会自动添加样式类。

解决方案 #

方案1：开启后代检测（最简便，优先使用）

给父级的routerLinkActive添加配置项，开启后代检测权限，允许它检测所有嵌套层级的routerLink激活状态：

<div class="menu" 
     routerLinkActive="active-group"
     [routerLinkActiveOptions]="{descendants: true}">
  <app-link *ngFor="let link of links" [link]="link"></app-link>
</div>

配置项descendants: true会让routerLinkActive遍历所有后代节点（包括嵌套组件内部）的routerLink，只要有任意一个路由处于激活状态，就会添加指定样式类。

方案2：父级激活实例透传（适用于需要精确控制的场景）

如果方案1未生效，可将父级的routerLinkActive实例透传到子组件，让子组件内部的routerLink直接关联父级激活逻辑：

1. 父组件模板中给routerLinkActive声明模板引用变量，并传递给子组件：

<div class="menu" 
     routerLinkActive="active-group"
     #rla="routerLinkActive">
  <app-link *ngFor="let link of links" [link]="link" [parentRla]="rla"></app-link>
</div>

2. 子组件app-link中添加输入属性接收父级激活实例：

import { RouterLinkActive } from '@angular/router';
// ...
@Input() parentRla: RouterLinkActive;

3. 子组件模板中将内部routerLink和父级激活实例绑定：

<a [routerLink]="link" [routerLinkActive]="parentRla">{{ link }}</a>

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