Nativescript 8+Angular 12懒加载下nsRouterLinkActive不添加active类问题

该问题是NativeScript 8+版本配套Angular 12+后，路由指令匹配逻辑调整导致的常见问题，可按以下步骤排查解决：

• 第一步：确认模块导入正确性
  根App模块、存放导航组件的模块/共享模块，必须同时导入并导出NativeScriptRouterModule，不能仅导入Angular原生RouterModule，示例如下：

  // 共享模块或App模块代码
  import { NativeScriptRouterModule } from '@nativescript/angular';
  @NgModule({
    imports: [NativeScriptRouterModule],
    exports: [NativeScriptRouterModule]
  })
  

• 第二步：显式指定路由匹配规则
  NS 8+后nsRouterLinkActive对懒加载路由的默认匹配逻辑变更，需要主动添加匹配选项配置，修改你的导航代码：

  <Label text="&#xf011;" class="fas bottomButton" [nsRouterLink]="['/mysettings']" nsRouterLinkActive="active" [nsRouterLinkActiveOptions]="{ exact: false }" pageTransition="slide"></Label>
  

  如果你需要完全匹配路径才高亮，将exact设为true即可。
• 第三步：版本兼容bug兼容方案
  如果上述配置后仍然无效，属于NS 8.1的已知版本bug，可通过主动监听路由事件实现高亮逻辑：
  1. 组件类中注入Router监听路由变化

  import { Router, NavigationEnd } from '@angular/router';
  // ...
  isSettingsActive = false;
  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 根据实际路由匹配规则调整判断逻辑
        this.isSettingsActive = event.url === '/mysettings' || event.url.startsWith('/mysettings/');
      }
    })
  }
  

  2. 替换模板中的高亮绑定逻辑

  <Label text="&#xf011;" class="fas bottomButton" [nsRouterLink]="['/mysettings']" [class.active]="isSettingsActive" pageTransition="slide"></Label>
  

• 额外检查点
  确认懒加载的MysettingsModule内部路由没有设置空路径full匹配的重定向逻辑，如果存在该配置，将第二步的exact设为false即可解决路径匹配干扰问题。

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