停用 RouterLinkActive

在 Angular 应用中，RouterLinkActive 是一个常见的指令，它可以帮助我们在当前路由活动时自动添加一个 CSS 样式类。但有时我们可能需要停用这个指令，本文将介绍如何停用 RouterLinkActive。

方法一：直接删除 RouterLinkActive 指令

最简单的方法是直接删除要使用 RouterLinkActive 指令的 HTML 元素上的指令。

示例代码：

<nav>
  <a routerLink="/home">首页</a>
  <a routerLink="/about">关于</a>
</nav>

上述代码使用了 RouterLinkActive 指令，但如果你不需要它，可以直接删除 routerLinkActive。

<nav>
  <a routerLink="/home">首页</a>
  <a routerLink="/about">关于</a>
</nav>

方法二：使用 RouterLinkActive 的属性

如果你想保留 RouterLinkActive 指令，但不想让它起作用，你可以使用 RouterLinkActive 的两个属性：routerLinkActiveOptions 和 routerLinkActive。

将 routerLinkActiveOptions 属性设置为 {exact: false} 可以禁用精确匹配，而将 routerLinkActive 属性设置为空数组将禁用样式类的添加。

示例代码：

<nav>
  <a routerLink="/home" routerLinkActiveOptions="{exact: false}" routerLinkActive="[]">首页</a>
  <a routerLink="/about" routerLinkActiveOptions="{exact: false}" routerLinkActive="[]">关于</a>
</nav>

上述代码使用了 RouterLinkActive 指令，但它的属性都被设置成了禁用状态，因此 RouterLinkActive 不会生效。

结论

以上两种方法都可以帮助你停用 RouterLinkActive 指令，你可以根据实际情况选择其中的一种方法进行使用。

参考链接：

• Angular RouterLinkActive & RouterLink - Stop Activation and Styling