Angular-兄弟のRouterLinkActiveに応じて要素にスタイルを適用しますか？

Question

ユーザーがナビゲートするときにペイントする必要のあるメニューバーがアプリに1つだけではなく、ペイントする必要のある別のコンポーネントもあります。 routerLinkActiveを使用するだけでこれを達成できますか？

menu.html

<menu>
  <a routerLink="page1" routerLinkActive="active">
      option1
  </a>
  <a routerLink="page2" routerLinkActive="active">
      option2
  </a>
</menu>

このメニューはうまく機能します。しかし、私が求めているのは、他のHTMLタグに配置されたrouterLinkActiveプロパティをどのように利用できるかということです。お気に入り：

main.html

<main>
    <span class="title" routerLinkActive="active">My sub child part</span>
</main>

Answer 1

メインのナビゲーションアイテムがサブメニューの開閉メカニズムとして機能するだけで、Angularに組み込まれているrouterLinkActiveメカニズムを使用したい場合は、親アイテムを「複製」して、実際にはrouterLinkであると考えることができます。このような：

<nav class="main-nav">
  <a routerLink="/someroute"
     routerLinkActive="active">somelink to a route</a>
  <a (click)="openSubMenu('some-sub-menu')"
     routerLinkActive="active"><span          
     routerLink="/parentlink"
      [hidden]="true">hidden</span>Some Sub Route</a>
</nav>
<nav class="sub-nav">
  <a *ngIf="activeSubMenu ==='some-sub-menu'"
     routerLinkActive="active"
     routerLink="/parentlink/youractualsubroute">Some Sub-route</a>
</nav>

トリックは、親リンクを持つ 'hidden' <span>要素にあります。これにより、親リンクも親要素のrouterLinkActiveプロパティで強調表示されます。