Angular routerLinkActive指令异常 子路由页面active样式类未生效

问题根因 #

• 核心问题是About导航使用了原生href属性而非Angular内置的routerLink指令：routerLinkActive指令需要绑定在带有routerLink指令的元素上，才能正常监听Angular路由系统的状态变化，匹配当前路由后添加对应的激活类。原生href触发的是浏览器默认跳转逻辑，不会被Angular路由系统捕获状态，自然无法触发active类的添加。
• 如果你的项目做了前端路由 fallback 配置，原生href跳转后会触发页面重载，重载后的routerLinkActive也无法识别不带routerLink的元素对应的路由状态。

修复方案 #

将About导航的href替换为routerLink即可，修改后代码如下：

<a routerLink="/profile" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Posts</a>
<a routerLink="/profile/about" routerLinkActive="active">About</a>

修改后跳转至/profile/about路径时，routerLinkActive会自动识别路由匹配关系，给About导航添加上active类。

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