首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于router.url匹配角度向ngFor循环中的一个元素添加类

,可以通过以下步骤实现:

  1. 首先,需要在组件中引入Router模块,并注入到构造函数中,以便使用路由功能。
代码语言:txt
复制
import { Router } from '@angular/router';

constructor(private router: Router) { }
  1. 在ngFor循环中的每个元素上,使用ngClass指令来动态添加类。ngClass指令可以接收一个对象,根据对象的键值对来决定是否添加类。
代码语言:txt
复制
<div *ngFor="let item of items" [ngClass]="{'active': isActive(item)}">{{ item.name }}</div>
  1. 在组件中,创建一个方法isActive(item),用于判断当前路由是否与元素的路由匹配。如果匹配,则返回true,否则返回false。
代码语言:txt
复制
isActive(item: any): boolean {
  return this.router.isActive(item.route, true);
}
  1. 在组件的路由配置中,为每个路由定义一个唯一的route属性,用于与当前路由进行匹配。
代码语言:txt
复制
const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { route: '/home' } },
  { path: 'about', component: AboutComponent, data: { route: '/about' } },
  // 其他路由配置
];

这样,当路由与ngFor循环中的元素的route属性匹配时,对应的元素就会添加active类。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,无法提供具体链接。但是,腾讯云提供了丰富的云计算产品和服务,可以根据具体需求选择相应的产品,如云服务器、云数据库、云存储等。可以通过访问腾讯云官方网站,了解更多关于腾讯云的产品和服务信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券