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

Question

我的应用程序上没有一个菜单栏,当用户导航时我需要绘制,我还有其他组件也需要绘制.我可以实现这个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

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

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

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

#rla是模板变量 您可以RouterLinkActive在文档中找到有关该指令的这种用例的更多信息

Answer 2

您可以将RouterLinkActive指令应用于RouterLink的祖先。

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

更多细节在这里。

希望这可以帮助！！