首页
学习
活动
专区
工具
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类。

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

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

相关·内容

AngularDart4.0 指南- 模板语法二 顶

以前缀开始,可选地跟一个点(.)和一个CSS名字替代括号内元素属性:[class.class-name]。 以下示例显示如何使用class绑定来添加和删除应用程序“special”。...NgClass 您通常通过动态添加和删除CSS来控制元素显示方式。 你可以绑定到ngClass来同时添加或删除多个。 class绑定是添加或删除单个好方法。 <!...考虑一个设置组件属性组件方法setCurrentClasses,currentClasses,该对象基于三个其他组件属性true / false状态添加或删除三个: Map<String, bool...NgFor:为列表中每个项目重复一个模板。 NgSwitch:只显示多个可能元素一个。 NgIf  您可以通过元素应用NgIf指令(称为宿主元素)来添加或移除DOM中元素。...它别无选择,只能拆除旧DOM元素并插入所有新DOM元素。 Angular可以通过trackBy避免这种流失。 组件添加一个返回NgFor应跟踪值方法。 在这个例子中,这个值就是英雄ID。

29.9K20

Angular 中结构指令模式 - 它们是什么且怎么使用

*ngIf - 根据表达式返回布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配是图 下面是一个结构化指令例子。...这会将其转换为方括号 [] 中属性绑定,比如 [ngIf]。 其余部分,包含名,插入到 里。...要使用结构指令,我们需要在 HTML 模版中添加一个带有指令元素。然后根据我们在指令中设置条件或者表达式添加、删除或者替换元素。 结构指令例子 我们添加些简单 HTML 代码。...当条件值是 true 时候,相关元素就会被渲染到 DOM 中,其余元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 元素到 DOM 中。...如果你想在 DOM 中添加或者移除一个元素时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。甚至可以使用它们来创建一个之前不存在元素

3.8K20

Angular2 之 结构型指令几个概念

Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板指令。...结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM布局。 我们经常看到内置结构型指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIf。...NgIf案例分析 该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。 注意:这里是出现或者消失,并不是隐藏。 隐藏元素利弊 当我们隐藏元素时,组件行为还在继续。...总结 基于上面的利弊分析,无论是我们在使用内置指令还是使用自定指令时候,我们应该自己分析提添加、移除元素以及创建和销毁组件后果。...ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20

AngularDart 4.0 高级-结构指令 顶

一个原因。 NgIf指向指令; ngIf引用指令属性(attribute)名称。 指令拼写使用UpperCamelCase(NgIf)。...您仅可以将一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂事情。 当两个指令声明相同宿主元素时,哪一个优先? NgIf或NgFor应该先走哪一个?...这个用例有一个简单解决方案:将*ngIf放在包裹*ngFor元素容器元素上。 一个或两个元素可以是一个temple,所以你不必引入额外HTML级别。...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase值与switch匹配时,会显示它宿主元素。...当没有同级NgSwitchCase匹配switch值时,NgSwitchDefault显示它宿主元素。 您应用指令元素是其宿主元素.

16K20

Angular 6.x 快速入门

HTML代码中匹配标签 template: `Hello {{name}}`, // 定义组件内嵌视图 }) 定义组件 export class AppComponent {...name = 'Angular'; } 定义数据接口 在 TypeScript 中接口是一个非常灵活概念,除了可用于对一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述... ngFor 指令简介 该指令用于基于可迭代对象中每一项创建相应模板。它与 AngularJS 1.x 中 ng-repeat 指令功能是等价。...组件,开发一个功能,即可以让用户动态控制技能信息显示与隐藏。...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件时,它将动态创建对应组件,并将其作为兄弟元素,插入到

14.1K20

ng-content 中隐藏内容

Counter { id: number; constructor() { this.id = ++instances; } } 上面示例中我们定义了 Counter 组件,组件...如果 ng-content 上没有设置 select 属性,它将接收全部内容,或接收不匹配任何其他 ng-content 元素内容。...因为 ng-container 容器不再匹配 select="counter"。为了解决这个问题,我们必须使用 ngProjectAs 属性,它可以应用于任何元素上。...在我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令外层容器中添加 ngIf 指令: import { Component } from '@angular/core';...因此,投影内容生命周期将被绑定到它被声明地方,而不是显示在地方。 这种行为有两个原因:期望一致性和性能。什么 “期望一致性” 意味着作为开发人员,可以基于应用程序代码,猜测其行为。

2.7K30

Angular 显示英雄列表

/mock-heroes'; 往添加一个 heroes 属性,这样可以暴露出这些英雄,以供绑定。... 列出这些英雄 打开 HeroesComponent 模板文件,并做如下修改: 在顶部添加  然后添加表示无序列表 HTML 元素() 在  中插入一个  元素,以显示单个...它会为列表中每项数据复写它宿主元素。 在这个例子中  就是 *ngFor 宿主元素 heroes 就是来自 HeroesComponent 列表。...所以你只要在用户点击一个  时把 .selected 应用到该元素上就可以了。 Angular  CSS 绑定机制让根据条件添加或移除一个 CSS 变得很容易。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式

4.4K70

Angular 2 表单(下)

input 元素都有一个 id 属性,它被 label 元素 for 属性用来把标签匹配到对应 input 。...每一个 input 元素都有一个 name 属性, Angular 表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...状态 为 true 时 为 false 时 控件已经被访问过 ng-touched ng-untouched 控件值已经变化 ng-dirty ng-pristine 控件值是有效 ng-valid...删除掉 name 字段数据,显示结果如下所示: 添加一个网站 接下来我们创建一个用于添加网站表单,在 app/site-form.component.html 添加一个按钮: app/site-form.component.html...当我们添加一个网站时,它把 active 标记设置为 false , 然后通过一个快速 setTimeout 函数迅速把它设置回 true 。

1.6K10

AngularDart4.0 指南- 表单 顶

创建一个基本表单 一个Angular表单有两个部分:一个基于HTML模板和一个组件,以编程方式处理数据和用户交互。 从课程开始,因为它简要地说明了英雄编辑可以做什么。...你会看到一个样式化表单! 使用* ngFor添加powers 英雄必须从一个固定机构批准权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent中)。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定到powers列表。...="let p of powers" [value]="p">{{p}} 每个input元素都有一个id属性,label元素for属性使用它来匹配...当控件是“原始”时隐藏消息实现了这个目标。 当您表单添加一个“清除”按钮时,您会看到此选项重要性。 英雄Alter Ego是可选,所以你可以不用关那个。 英雄power选择是必需

17.4K30

浅谈Angular

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写库。它可通过 标签添加到HTML 页面。...AngularJS 是以一个 JavaScript 文件形式发布,可通过 script 标签添加到网页中。...ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...可以给@Input装饰器内部填写一个元数据,这个值是外部使用名字 内部还是使用原来名字 3.如果想要给指令添加元素绑定事件,需要使用@HostListener装饰器 如果要通过指令控制DOM显隐...里,并不是所有的值都可以被订阅,只有Observable或者Observable子类创建出对象可以被订阅 subscribe是Observable一个函数。

4.4K10

Angular 显示英雄列表

列出这些英雄 打开 HeroesComponent 模板文件,并做如下修改: 在顶部添加  然后添加表示无序列表 HTML 元素() 在  中插入一个  元素,以显示单个...它会为列表中每项数据复写它宿主元素。 在这个例子中  就是 *ngFor 宿主元素 heroes 就是来自 HeroesComponent 列表。...所选英雄颜色来自于你前面添加样式中 CSS  .selected。 所以你只要在用户点击一个  时把 .selected 应用到该元素上就可以了。...Angular  CSS 绑定机制让根据条件添加或移除一个 CSS 变得很容易。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式

4K30

AngularDart4.0 英雄之旅-教程-08HTTP 顶

添加加入英雄能力 要添加英雄,应用程序需要英雄名字。 您可以使用与添加按钮配对输入元素。...添加删除英雄能力 英雄视图中每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML中,位于重复元素英雄名称之后。...正如所料,* ngFor从组件英雄属性重复英雄对象。 但正如你很快就会看到,英雄财产现在是一个英雄列表流,而不仅仅是一个英雄名单。...StreamController是Stream控制器,例如,允许您通过添加数据来操作基础流。...这个简单例子将错误输出到控制台。 一个真实应用程序应该做更好。 将搜索组件添加到仪表板 将英雄搜索HTML元素添加到DashboardComponent模板底部。

11K30

Angular快速学习笔记(2) -- 架构

imports(导入表) —— 那些导出了本模块中组件模板所需其它模块。 providers —— 本模块全局服务中贡献那些服务创建器。 这些服务能被本应用中任何部分使用。...用户修改通过事件绑定流回组件,把属性值设置为最新值。Angular 在每个 JavaScript 事件循环中处理所有的数据绑定,它会从组件树根部开始,递归处理全部子组件。 ?...结构型指令 结构型指令通过添加、移除或替换 DOM 元素来修改布局 <app-hero-detail *ngIf="selectedHero...- 当你往根模块中<em>添加</em>服务提供商时,服务<em>的</em>同<em>一个</em>实例会服务于你应用中<em>的</em>所有组件。...它<em>的</em>工作模型<em>基于</em>人们熟知<em>的</em>浏览器导航约定: 在地址栏输入 URL,浏览器就会导航到相应<em>的</em>页面 在页面中点击链接,浏览器就会导航到<em>一个</em>新页面 点击浏览器<em>的</em>前进和后退按钮,浏览器就会在你<em>的</em>浏览历史中向前或向后导航

5.2K20

AngularDart4.0 指南-体系结构概述 顶

您可以通过使用Angular标记组合HTML 模板,编写组件来管理这些模板,在服务中添加应用程序逻辑以及在模块中装入组件和服务来编写Angular应用程序。 然后,通过引导根模块启动应用程序。...在模板最后一行,标签是一个自定义元素,代表一个组件HeroDetailComponent。...用户更改也会返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树根到所有子组件。 ?...它们倾向于以属性形式出现在元素标签内,有时候以名称形式出现,但更常见是作为赋值或绑定目标。 结构指令通过添加,删除和替换DOM中元素来改变布局。...但它并不包括你需要知道一切。 以下是其他重要Angular功能和服务简短字母顺序列表。 Forms:支持基于HTML验证和脏检查复杂数据录入方案。

7.9K30
领券