Angular - 检测 ngIf 中的事件路由

Question

我想为事件和非事件菜单项显示不同的标记，以便事件菜单项不包括 a标签:

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

routerLinkActive指令在这里没有帮助，因为它只能为事件路由添加一些类，但不能使用不同的标记。我知道我可以注入(inject) Router到我的组件并使用这样的东西

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

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

Answer 1

The routerLinkActive directive doesn't help here since it can only add some class for active route but not to use a different markup.

实际上...

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

routerLinkActive变量绑定(bind)到模板变量，然后根据需要重新使用。不幸的是，唯一需要注意的是，您不能在 <section> 上拥有这一切。元素为 #home需要在解析器命中 <section> 之前解决.