アクティブな要素フォームテンプレートを取得できません

Question

次のような単純なコンポーネントを使用して、テンプレートからアクティブ要素への参照を取得しようとしています。

export class SidebarComponent { 
    @ViewChildren(RouterLinkActive) linkItems: QueryList<RouterLinkActive>; 

    ngAfterViewInit() { 
    let activeLink = this.linkItems.find(item => item.isActive); 

    console.log('Active link is'); 
    console.log(activeLink); //this is undefined 
    } 

} 

そして、上記のコンポーネントのための単純なテンプレートです。

<ul> 
    <li> 
    <a [routerLink]="['/app/link1']" routerLinkActive="active"> Link 1</a> 
    </li> 
    <li> 
    <a [routerLink]="['/app/link2']" routerLinkActive="active"> Link 2</a> 
    </li> 
</ul> 

問題は、私はスタイルがactiveクラスを要素に適用されていても、テンプレートから能動素子を取得しておりませんです。同じコードは、角度v2で動作しましたが、角度v4では壊れました。私はどのようにしてアクティブな要素を角度v4で得るべきですか？

Answer 1

私はhttps://github.com/angular/angular/blob/82417b3ca59aa2e5f41ee12db4cb18970b5b4f47/packages/router/src/directives/router_link_active.ts（ライン98、108、132）

のコードも、私は（ isActiveがまだ設定されていない場合）あなたのチェックがあまりにも早く起こると想定

constructor(private router:Router) {} 

... 

let isLinkActive = this.linkItems.toArray()[0].isLinkActive(this.router); 

let activeLink = this.linkItems.find(item => isLinkActive(item)); 

参照を試してみました