routerlink active-class
时间: 2023-10-20 10:30:18 浏览: 132
ngx-routerlink-delay:使用附加的@Input数据绑定扩展RouterLinkWithHref指令a [routerLink],以延迟导航
`routerLink` 是 Angular 框架中用于在路由之间导航的指令。`active-class` 则是 `routerLink` 的一个属性,用于指定当前活动路由链接所应用的CSS类。
当目标路由与当前活动路由匹配时,`active-class` 所指定的CSS类将会被添加到该路由链接的HTML元素上。这样做可以使得当前活动的链接在页面上呈现出不同的样式,以提供视觉上的反馈。
例如,我们可以在模板中使用 `routerLink` 和 `active-class` 来创建一个导航菜单,并为当前活动路由链接添加一个名为 "active" 的CSS类:
```html
<nav>
<a routerLink="/home" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
<a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>
```
在上述代码中,当路由为 `/home` 时,`<a>` 元素上将会添加 `active` 类;当路由为 `/about` 时,相应的 `<a>` 元素将会添加 `active` 类;以此类推。
你可以根据自己的需要自定义 `active-class` 的名称,并在CSS样式表中定义相应的样式规则。
阅读全文