首页 > 解决方案 > routerLinkActive 和 routerLinkActiveOptions 可以放在父元素上吗?

问题描述

可能是我忘记了一些明显的事情,或者我可能错过了改变......

我认为曾经可以在all 的父元素上而不是在每个单独的元素上指定[routerLinkActiveOptions]和class。事实上,该指令收集了所有routeLinkActive[routerLink]ContentChildren

<!-- this won't work -->
<nav routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" >
  <a routerLink="/">Home</a>
  <a routerLink="/products">Products</a>
  <a routerLink="/customers">Customers</a>
</nav>

<!-- this will -->
<nav>
  <a routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/">Home</a>
  <a routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/products">Products</a>
  <a routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/customers">Customers</a>
</nav>

<router-outlet></router-outlet>

这似乎有点冗长。如果您没有从循环中填充链接,是否有更清洁的方法?

(角度 v12.2.x)

标签: angularangular-routingangular-routerangular-routerlink

解决方案


推荐阅读