在 Angular 中设置活动路由器链接的样式
以角度设置活动路由器链路的样式允许用户区分活动路由器链路和非活动路由器链路。 Angular 提供了一种特殊的机制来处理活动的路由器链接。
方法：
- 创建要使用的 Angular 应用程序。
- 创建包含导航链接的标题组件。
- 然后在每个路由器链接上应用“routerLinkActive” ，并为该属性提供 CSS 类。在这里，我们在 CSS 文件中创建了“活动”类。
- 向根路由提供{exact : true }以避免多个活动路由器链接。
句法：
示例：我们创建了带有指定路由的标头组件。
header.component.html
header.component.css
.active{
background: 'white'
}header.component.htm
在这里，我们提供了“routerLinkActive” ，它是自动激活当前路由的路由功能，我们还必须提供 CSS 类。这里的routerLinkActive = “active” active 是一个 CSS 类，它会自动应用于激活的路由。
header.component.css
.active{
background: 'white'
}
但是在这里，即使我们导航到其他路线，它仍然会导致我们的 Home 路线始终处于活动状态，这背后的原因是“routerLinkActive”的工作方式。主路由在“localhost:4200/”上工作，其他路由是“localhost:4200/about” ，因此“routerLinkActive”在所有其他路由中找到“localhost:4200/” ，并且主路由链接始终处于活动状态以处理这个角度提供另一个名为 routerLinkActiveOptions 的指令。
更新
header.component.htm
因此routerLinkActiveOptions只允许将精确路径匹配作为 Home 组件的活动路由。
输出：
