Angular - 根据兄弟 RouterLinkActive 将样式应用于元素？

Question

我的应用程序中不仅有一个菜单栏需要在用户导航时绘制，我还有另一个组件也需要绘制。我可以仅使用 routerLinkActive 来实现吗？

menu.html

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

这个菜单很好用。但我要问的是如何利用放置在其他 HTML 标记中的 routerLinkActive 属性。喜欢:

ma​​in.html

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

Answer 1

您可以将 routerLinkActive 指令的状态绑定(bind)到类是否应用于元素，如下所示:

<a routerLink="page1" routerLinkActive="active" #rla="routerLinkActive"/>
<span [class.active-span]="rla.isActive"></span>

.active-span {
 background-color: red;
}

#rla 是一个模板变量 您可以在 the docs 中找到有关此 RouterLinkActive 指令用例的更多信息