Angular - 根据兄弟 RouterLinkActive 将样式应用于元素? [英] Angular - Apply style to element depending on sibling RouterLinkActive?

问题描述

我的应用程序上不仅有一个菜单栏需要在用户导航时进行绘制，我还有其他组件也需要进行绘制.我可以仅使用 routerLinkActive 来实现这一点吗?

I do not have only one menu bar on my app that I need to be painted when the user navigates, I have another components too that needs to be painted as well. Can I achieve this just using routerLinkActive?

menu.html

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

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

This menu works great. But what I'm asking is how can I take advantage of routerLinkActive property placed in other HTML Tag. like:

ma​​in.html

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

推荐答案

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

You could bind the state of the routerLinkActive directive to whether or not a class is applied to an element as follows:

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

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

#rla 是一个模板变量您可以在 文档

#rla is a template variable You can find more info about this use case of the RouterLinkActive directive in the docs

这篇关于Angular - 根据兄弟 RouterLinkActive 将样式应用于元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！