当任一子链路路由处于活动状态angular2时,如何将元素设置为活动状态

我有以下代码片段用于生成带有嵌入式下拉列表的bootstrap nav-tap:

    <ul class="nav nav-tabs">
      <li class="pull-right">
        <a class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a [routerLink]="['/profile/settings']">Settings</a></li>
            <li><a [routerLink]="['/profile/billing']">Billing</a></li>
          </ul>
      </li>
      <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature1']">Feature1</a></li>
      <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature2']">Feature2</a></li>
    </ul>

这适用于普通选项卡,但我无法弄清楚当任一嵌入式链接处于活动状态时如何使下拉列表处于活动状态.我试过了:

<a [routerLinkActive]="['active']" class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>

但它似乎没有解决任何问题,任何人都知道如何做到这一点?

最佳答案
我很笨,试图将[routerLinkActive]放在< a>上.元素而不是< li>.一旦我把它放在最顶层的李它就像一个魅力!

<ul class="nav nav-tabs">
  <li class="pull-right" [routerLinkActive]="['active']">
    <a class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a [routerLink]="['/profile/settings']">Settings</a></li>
        <li><a [routerLink]="['/profile/billing']">Billing</a></li>
      </ul>
  </li>
  <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature1']">Feature1</a></li>
  <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature2']">Feature2</a></li>
</ul>

转载注明原文:当任一子链路路由处于活动状态angular2时,如何将元素设置为活动状态 - 代码日志