angular - Angular 6 を使用してネストされたコンポーネントで RouterLinkActive にアクセスする

Question

レシピ項目のリストとして定義されたリストグループがあります。ユーザーがリスト要素をクリックするたびにアイテムの説明を表示するために、子ルーティングを使用しています。これまでのところクリックイベントとルーティングは機能していますが、クリックされたアイテムをアクティブとしてマークしたいと思います。

recipe-list.component.html

<app-recipe-item 
  *ngFor="let recipeEl of recipes; let i = index" 
  [recipe]="recipeEl"
  [routerLink]="i"
  style="cursor: pointer;"
  >
</app-recipe-item>

それを行うために、ネストされた内部でrouterLinkActiveディレクティブを使用しようとしてRecipeItemComponentいますが、ディレクティブがネストされたコンポーネントの範囲外にあるようです。

recipe-item.component.html

<div class="list-group">
  <a 
    class="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
    routerLinkActive="active"
    >
     TO BE MARKED AS ACTIVE WHEN CLICKED
  </a>
</div>

私は何が欠けていますか？localRefを使用しても、ネストされたコンポーネントでその値を取得することはできません。