角4：親コンポーネント=>子コンポーネントをサブスクライブするrouterLinkActive change

Question

私は2つのコンポーネント、LinkGroupとLinkItemを持っています。

LinkItemのテンプレートはシンプルです：例えば場合

<link-group title="Users"> 
    <link-item title="..." link="..."> 
    <link-item title="..." link="..."> 
    <link-item title="..." link="..."> 
</link-group> 

<link-group title="Servers"> 
    <link-item title="Server1" link="..."> 
    <link-item title="Server2" link="..."> 
    <link-item title="Server3" link="..."> 
</link-group> 

：

<a routerLinkActive="active" 
    [routerLinkActiveOptions]="{exact: true}" 
    [routerLink]="link"> {{ title }} 
</a> 

コンポーネントは、このように使用されていますServer2がクリックされましたrouterLinkActiveの変更をキャッチして、それを親リンクグループコンポーネントに送信して、タイトルの（ "Servers"）スタイルを変更することができます（ 'font-weight：bold'）。

私はhttps://angular.io/api/router/RouterLinkActiveのディレクティブページを見てきました。

私はAngular4をかなり新しくしているので、私は提案をすることができます。 'RouterLinkActive'ディレクティブを拡張し、ngOnChangesを上書きする必要がありますか？ （方法は？）

さらに簡単な方法がありますか？

何か助けていただければ幸いです。

編集：私は、リンク・グループのテンプレートを追加している必要があります。

<div routerLinkActive="active">{{ title }} 
    <ng-content></ng-content> 
</div> 

すべてのリンク項目の部品（およびそのrouterLinkディレクティブと実際のリンクが）もちろん

の内側にあることに注意してくださいCSSは存在します：

div.active { font-weight: bold } 

注：コンポーネントをまったく使用しないときは、純粋なhtml + routerLinkディレクティブで動作します。

Answer 1

私はハイパーリンクのタグがアクティブになっているときにスタイルが違うと思います。

.active { 
    font-weight:bold; 
    color:red; 
} 

here

・ホープ、このヘルプでは、このためのサンプル例を：あなたはとスタイルを追加しようとすることができます！

Answer 2

[OK]を、私はこのようにそれを解決：

リンクグループTSファイル：

active = ''; 
@ContentChildren(LinkItemComponent) linkItems: QueryList<LinkItemComponent>; 



    ngAfterContentInit() { 
     this.router.events.subscribe(event => { 
      if (event instanceof NavigationStart) { 
      const c: LinkItemComponent = this.linkItems.find(item => item.link === event.url); 
      if (c) 
       this.active = 'active'; 
      else 
       this.active = ''; 
      } 
     }); 
     } 

を次に単にのdivのクラス属性に 'アクティブ' を追加しました：

<div class="... {{ active }}">{{ title }} 
    <ng-content></ng-content> 
</div>