Angular - 根据同级 RouterLinkActive 将样式应用于元素？

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

菜单.html

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

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

主要.html

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

你可以绑定的状态routerLinkActive指示类是否应用于元素，如下所示：

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

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

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