Angular - 检测 ngIf 中的活动路由答案

【问题标题】：Angular - detect active route in ngIfAngular - 检测 ngIf 中的活动路由
【发布时间】：2017-05-08 08:31:33
【问题描述】：

我想为活动和非活动菜单项显示不同的标记，以便活动菜单项不包含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>

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

【问题讨论】：

您是否有特殊原因要删除活动的<a> 标签？路由器不会对单击它做出反应，如果您通过 css 将 pointer 更改为活动链接，它也不应该让用户感到困惑。 Imo 是最简单的方法，除非您有重要的理由完全删除 <a>。
主要是标记要求。是的，我也在考虑用css让它看起来像非链接元素

标签： angular routing

【解决方案1】：

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

其实……

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

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

【讨论】：