活动精确路由器链接演示？答案

【问题标题】：Active exact router link demo?活动精确路由器链接演示？
【发布时间】：2017-11-15 12:41:05
【问题描述】：

angular router 文档有以下关于如何使活动路由器链接准确的 sn-p：

RouterLinkActive 指令根据当前 RouterState 切换活动 RouterLink 的 css 类。这通过路由树的每一级向下级联，因此父和子路由器链接可以同时处于活动状态。要覆盖此行为，您可以使用 {exact: true } 表达式绑定到 [routerLinkActiveOptions] 输入绑定。通过使用 {exact: true }，给定的 RouterLink 只有在其 URL 与当前 URL 完全匹配时才会处于活动状态。

有没有人有一个确切的路由器链接的演示？

【问题讨论】：

你的意思是如何在html中使用它？ <a [routerLink]="/inbox" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"> Inbox </a>?

标签： javascript angular

【解决方案1】：

在以下示例中，active-link 类将仅当 URL 为 /inbox 而不是 /inbox/33 时添加。

<a [routerLink]="/inbox" 
   routerLinkActive="active-link" 
   [routerLinkActiveOptions]="{exact: true}">
    Inbox
</a>

【讨论】：