Angular - 检测 ngIf 中的活动路由

Question

我想为活动和非活动菜单项显示不同的标记，以便活动菜单项不包含a标签：

<li>
    <a routerLink="/abc">Inactive</a>
</li>    
<li>Active</li>

该routerLinkActive指令在这里没有帮助，因为它只能为活动路由添加一些类，而不能使用不同的标记。我知道我可以注入Router我的组件并使用类似的东西

<li>
    <ng-container *ngIf="router.isActive('/abc')">Active</ng-container>
    <a *ngIf="!router.isActive('/abc')" routerLink="/abc">Inactive</a>
</li>

但对于这种情况有更好的内置解决方案吗？

Answer 1

routerLinkActive 指令在这里没有帮助，因为它只能为活动路由添加一些类，而不能使用不同的标记。

实际上...

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

该routerLinkActive变量绑定到模板变量，然后根据需要重新使用。不幸的是，唯一需要注意的是，您不能将所有这些都放在<section>元素上，因为#home需要在解析器命中之前解决<section>。