Angular：使用 routerLink 获取绝对路径

Question

我正在开发一个导航按钮栏，当前路线在其中切换一个 css 类（footer-btn-active），它“点亮”当前路线的按钮。

这是当前代码：

<button routerLink="/system"
                routerLinkActive="footer-btn-active"
                class="footer-btn">System-info</button>

现在如何工作：按钮 class (footer-btn-active) 在 /system/... 的每个路径上保持活动状态

它应该如何工作：我希望按钮 class (footer-btn-active) 保持活动状态，仅在绝对路径 /system 上

Answer 1

尝试使用以下属性，exact: true 只会使 class 处于活动状态，如果确切的路径匹配。

<button 
routerLink="/system"
routerLinkActive="footer-btn-active"
[routerLinkActiveOptions]="{ exact: true }"
class="footer-btn">System-info</button>