Angular 2:动态生成链接的Active Router link和routerLinkActiveOptions

Angular 2: Active Router link and routerLinkActiveOptions for dynamically generated links

本文关键字：Router Active link routerLinkActiveOptions 链接 动态 Angular      更新时间：2023-09-26

我有一个使用列表标签创建的菜单，我想在其中一个子routerLink处于活动状态时使用routerLinkActiveOptions为父标签应用一个类，像这样

 <ul class="treeview-menu" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <li>
        <a class="pointer" [routerLinkActive]="['linkActive']" routerLink="/list/val"> 
             Link
         </a>
      </li>
    </ul>

它的工作很好，但是当我尝试相同的动态生成的菜单使用数据数组它不工作。相同的代码是

 <ul class="treeview-menu" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <li *ngFor="let d of data">
        <a class="pointer" [routerLinkActive]="['linkActive']" routerLink="/list/{{d.val}}"> 
          {{d.name}}
        </a>
      </li>
    </ul>

如何实现这一点，有帮助吗?

您需要像设置routerLinkActive="active"一样设置[routerLinkActive]="['linkActive']":

<ul class="treeview-menu" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
  <li *ngFor="let d of data">
    <a class="pointer" routerLinkActive="linkActive" routerLink="/list/{{d.val}}"> 
      {{d.name}}
    </a>
  </li>
</ul>
相关文章：