RouterLinkActiveは、任意のJavaScriptのソリューションを受け入れますngFor

Question

で作業を行いますが、最良の答えは、私は動的API呼び出しに基づいて、私のナビゲーションバーを作成しようとしていますangular2

を使用して1かもしれません。

問題は、別のli（子）がアクティブな場合、親のliにアクティブなクラスが必要なことです。

次のコードは、私はそれが何をしたいかに動作しますが、私は修正しようとしていることをどのように動作しませんされ、動的に

<nav> 
       <ul> 
        <li> 
         <a (click)="togglePatientSideSearch()"><i class="fa fa-lg fa-fw fa-search"></i> <span class="menu-item-parent">Patient Search</span></a> 
        </li> 
        <li data-nav-target="1" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: false }"> 
         <a (click)="toggleNavMenuParentSelected(1)" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Payroll</span> 
         <b class="collapse-sign"> 
          <em class="fa fa-plus-square-o"></em> 
          </b> 
         </a> 
         <ul> 
          <li [routerLinkActive]="['active']"> 
           <a [routerLink]="['/payroll/summary']" title="Payroll Summary"><span class="menu-item-parent">Summary</span></a> 
          </li> 
          <li [routerLinkActive]="['active']"> 
           <a [routerLink]="['/payroll/daily']" title="Payroll Daily"><span class="menu-item-parent">Daily</span></a> 
          </li> 
         </ul> 
        </li> 
</nav> 

以下のコードを、それをロードしません！

<nav> 
      <ul *ngIf="navigationMenu"> 
       <li *ngFor="let nav of navigationMenu; let i = index;" [attr.data-nav-target]="nav.logo && !nav.children ? null : i" [attr.routerLinkActiveOptions]="nav.logo && !nav.children ? null : { exact: false }" [attr.routerLinkActive]="nav.logo && !nav.children ? null : ['active']" > 
        <a *ngIf="nav.logo && !nav.children" (click)="navigationClicked(nav)"><i class="{{nav.logo}}"></i> <span class="menu-item-parent">{{nav.name}}</span></a> 
        <a *ngIf="nav.logo && nav.children" (click)="toggleNavMenuParentSelected(i)" title="Dashboard"> 
         <i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">{{nav.name}}</span> 
         <b class="collapse-sign"> 
          <em class="fa fa-plus-square-o"></em> 
         </b> 
        </a> 
        <ul *ngIf="nav.children"> 
         <li [routerLinkActive]="['active']" *ngFor="let child of nav.children;"> 
          <a [routerLink]="['/home']" title="Home"><span class="menu-item-parent">{{child.name}}</span></a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 

私はnavigationMenuと呼ばれる一つのオブジェクトで同時に全体のナビゲーションバーをロードしています。 以下は、動的に読み込まれたときとは違うように見せたいものです。（別の名前を無視する）を使用でき

Answer 1

：

あなたと

[routerLinkActiveOptions]="{ exact: true }" 

：

routerLinkActive="active" 

私はここに私のために働いた解決策を見つけました：

https://github.com/angular/angular/issues/8397