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

如何在Angular 2+ (无ngClass)中添加和删除动态创建的元素中的类?

在Angular 2+中,可以使用Renderer2来动态添加和删除元素中的类。以下是一个示例代码:

首先,确保你已经导入了Renderer2:

代码语言:txt
复制
import { Component, Renderer2, ElementRef } from '@angular/core';

然后,在你的组件类中注入Renderer2和ElementRef:

代码语言:txt
复制
constructor(private renderer: Renderer2, private el: ElementRef) { }

接下来,你可以使用Renderer2的addClass()和removeClass()方法来添加和删除类。假设你要动态创建一个div元素,并在其中添加一个名为"custom-class"的类:

代码语言:txt
复制
createDynamicElement() {
  const div = this.renderer.createElement('div');
  const text = this.renderer.createText('Dynamic Element');
  
  this.renderer.appendChild(div, text);
  this.renderer.addClass(div, 'custom-class');
  
  const container = this.el.nativeElement.querySelector('.container');
  this.renderer.appendChild(container, div);
}

在上面的代码中,我们首先使用createElement()方法创建一个div元素,然后使用createText()方法创建一个文本节点。接下来,我们使用appendChild()方法将文本节点添加到div元素中,并使用addClass()方法将"custom-class"类添加到div元素中。最后,我们使用querySelector()方法找到容器元素,并使用appendChild()方法将div元素添加到容器中。

如果你想删除动态创建元素中的类,可以使用removeClass()方法:

代码语言:txt
复制
removeDynamicElementClass() {
  const div = this.el.nativeElement.querySelector('.container div');
  this.renderer.removeClass(div, 'custom-class');
}

在上面的代码中,我们使用querySelector()方法找到动态创建的div元素,并使用removeClass()方法将"custom-class"类从div元素中删除。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。关于Angular的更多信息和使用方法,你可以参考腾讯云的Angular产品文档:Angular产品介绍

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

相关·内容

Python 列表修改、添加删除元素实现

本文介绍是列表修改、添加删除元素。第一次写博客,如果本文有什么错误,还请大家评论指正。谢谢! 创建列表大多数都将是动态,这就意味着列表创建后,将随着程序运行删减元素。...['honda', 'suzuki'] 删除第二个元素,同理在python程序,是从0开始计数,即删除是’yamaha’ 使用 pop()删除元素 pop() 可删除列表末尾元素,并让你能够接着使用它...有的时候,我们不知道从列表删除位置。...# 4.缩减名单 # 得知新购买餐桌无法及时送达,因此只能邀请两位嘉宾 # 在前面基础上,在程序末尾添加一行代码,打印只能邀请两位嘉宾共进晚餐 # 使用pop()不断地删除名单嘉宾,直到有两名嘉宾为止...[] 到此这篇关于Python 列表修改、添加删除元素实现文章就介绍到这了,更多相关Python 修改添加删除元素内容请搜索ZaLou.Cn以前文章或继续浏览下面的相关文章希望大家以后多多支持

5.4K20

盘点Vector、Vector向量添加元素常用方法、Vector向量删除元素对象常用方法

一、Vector 1.在cc++动态数组一般是用指针来实现,Vector是实现List接口,java提供了很多库来方便开发人员来使用,Vector是其中之一。...Vector是实现动态数组功能,主要是用在不知道数组大小,在开发常用查找、插入、删除工作情况。...向量添加元素常用方法 1.void addElement(Object obj)在集合末尾添加一个元素,不管它是什么类型都会把它toString()返回值加进去。...三、Vector向量删除元素对象常用方法 1.void removeAllElement( )删除集合所有元素,并将把大小设置为0。...四、总结 本文主要介绍了Vector、Vector向量添加元素常用方法、Vector向量删除元素对象常用方法。 Vector是实现动态数组功能,介绍它4种构造方法。

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

    Class绑定 您可以使用Class绑定从元素类属性添加删除CSS名称。 Class绑定语法类似于属性(property)绑定。...以前缀开始,可选地跟一个点(.)一个CSS名字替代括号内元素属性:[class.class-name]。 以下示例显示如何使用class绑定来添加删除应用程序“special”。...本节介绍最常用属性指令: NgClass添加删除一组CSS。 NgStyle:添加删除一组HTML样式。 NgModel:双向数据绑定到HTML表单元素。...NgClass 您通常通过动态添加删除CSS来控制元素显示方式。 你可以绑定到ngClass来同时添加删除多个。 class绑定是添加删除单个好方法。 <!...尝试绑定ngClass到一个key:value 控制Map。 对象每个键都是一个CSS名字; 如果应该添加,则其值为true,如果应该删除则为false。

    30K20

    Angular学习笔记(一)

    其中最重要属性是: declarations - 声明本模块拥有的视图Angular 有三种视图:组件、指令管道。...@Component 配置项包括: selector - CSS 选择器,它告诉 Angular 在父级 HTML 查找标签,创建并插入该组件。...数据绑定 Angular 支持数据绑定,一种让模板各部分与组件各部分相互合作机制。 往模板 HTML 添加绑定标记,来告诉 Angular 如何把二者联系起来。...'red' : 'green'"> 内置属性型指令 NgClass - 添加或移除一组CSS NgStyle - 添加或移除一组CSS样式 NgModel - 双向绑定到HTML表单元素...内置结构型指令 NgIf - 根据条件把一个元素添加到DOM或从DOM移除 NgSwitch - 一组指令,用于切换一组视图 NgFor - 对列表每个条目重复套用同一个模板 模板引用变量 #

    3.3K20

    AngularDart4.0 指南- 表单 顶

    建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。 将该包添加到pubspec依赖项: ?...要创建这样视觉反馈,您将使用Bootstrap自定义表单 is-validis-invalid。 将名为name模板引用变量添加到Name 标记。...它有一个绿色边框。 它具有形式控制有效性。 2.通过添加一些字符来更改name。 保持不变。 3.删除名称。 输入框边框变为红色。 is-invalid替换为is-valid。...删除#spy模板引用变量使用它诊断。 作为绑定替代方法,可以使用NgClass指令来设置控件样式。...模板引用变量,heroFormname。 双向数据绑定([(ngModel)])。 用于验证表单元素更改跟踪NgControl 指令。

    17.5K30

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

    在下面的章节,您将学习如何通过数据绑定来动态获取设置DOM(文档对象模型)值。 从数据绑定插值第一种形式开始,看看有多少更丰富模板HTML可以使用。请回到顶部。 插值({{...}})...快速执行 Angular在每个更改检测周期后执行模板表达式。 更改检测周期由许多异步活动触发,承诺分辨率,http结果,计时器事件,按键鼠标移动。...然后,您将学习如何使用封装了HTML组件创建元素,并将它们放入模板,就好像它们是原生HTML元素一样。 <!...添加删除disabled属性(Attributes)将禁用启用该按钮。...一个没有属性世界 在Angular世界,属性(attributes)唯一作用是初始化元素指令状态。

    5.2K10

    Angular: 最佳实践

    我们应该为我们数据添加类型限定,下面有些有用知识点: 使用类型联合交集。官网解释了如何使用 TS 编译器组合类型以轻松工作。这在处理来自 RESTful API 数据时非常有用。..., status: Statuses.Read} ]; statuses = Statuses } 复制代码 这里,我们为每个包含未读通知 HTML 元素添加了 unread 。...模版 Templates Angular 是使用 html 模版(当然,还有组件、指令管道)去渲染你应用程序视图 ,所以编写模版是不可避免事情,并且要保持模版整洁和易于理解是很重要。...比如,你想在模版为未正确填写表单控件添加 has-error (也就是说并非所有的校验都通过)。...读者可能意识到我并没有写关于 Directives Pipes 相关内容,那是因为我想写篇详细文章,关于 Angular DOM 是怎么工作

    2.8K40

    浅谈Angular

    AngularJS 是以一个 JavaScript 文件形式发布,可通过 script 标签添加到网页。...创建项目: 要想使用 npm 来安装 CLI,请打开终端/控制台窗口,并输入下列命令: npm install -g @angular/cli ②创建工作区初始应用:ng new 文件名 ③启动开发服务器...ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上从DOM结构移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...,需要在指令内部获取到宿主元素承载宿主元素容器,通过依赖注入templateRefViewContainerRef服务 4.管道:pipe 作用:对数据进行处理(删除,插入,过滤,拼接等)...里,并不是所有的值都可以被订阅,只有Observable或者Observable子类创建对象可以被订阅 subscribe是Observable一个函数。

    4.4K10

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

    = null" [hero]="selectedHero"> 虽然这个模板使用了典型HTML元素,但它也有一些不同之处。...HeroDetailComponent是HeroListComponent一个子项。 ? 注意是如何在原生HTML元素合适存放。...它们倾向于以属性形式出现在元素标签内,有时候以名称形式出现,但更常见是作为赋值或绑定目标。 结构指令通过添加删除替换DOM元素来改变布局。...,ngSwitch)或修改DOM元素组件方面(例如ngStylengClass)。...如果请求服务实例不在容器,那么在将服务返回给Angular之前,注入器将创建一个并将其添加到容器。 当所有请求服务已经解析并返回时,Angular可以用这些服务作为参数调用组件构造函数。

    7.9K30

    Angular教程】-组件初识|8月更文挑战

    前提: 准备一个空angular项目(ng new angular-course) 与Angular组件第一次会面 **通过创建组件命令: ****ng g c components/HelloWorld...**hello-world.component.ts**** 组件核心来看一下内容, 除了常规导入模块创建了一个****HelloWorldComponent**之外,还使用了**@Component...组件相关其他文件暂时先放一放,在Vue开发时候我们创建组件总是要挂载后才能使用,那angular需要挂载吗?...>未知 特点: 一个标签一个结构型指令 *标记 属性型指令 NgClass 在组件样式文件添加: .class1{ background-color: chocolate...div> NgModel(只适用于表单元素) 在组件ts添加属性: public value: string = 'hello world'; 在组件html添加演示代码: <input type

    1.9K20

    AngularDart 4.0 高级-结构指令 顶

    ngIf指令不会隐藏CSS元素。 它从DOM物理添加删除它们。 使用浏览器开发人员工具确认事实,以检查DOM。 ? 顶部段落在DOM。...当条件为false时,NgIf从DOM删除宿主元素,将它从DOM事件(它所依附)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件DOM节点可以被垃圾收集并释放内存。... 虽然不可见,但元素仍保留在DOM。 ? 对于一个简单段落来说,隐藏删除之间区别并不重要。 当宿主元素连接到资源密集型组件时,这很重要。 即使隐藏,这种组件行为也会继续。...这些相同考虑适用于每个结构指令,无论是内置还是定制。 在应用结构指令之前,您可能想暂停一下,以考虑添加删除元素以及创建和销毁组件后果。...TemplateRefViewContainerRef 像这样一个简单结构指令从Angular生成创建一个嵌入式视图,并将该视图插入与指令原始宿主元素相邻视图容器

    16.1K20

    angular面试题及答案_angular面试

    指令分类 组件:用于构建UI组件,继承于Directive 属性指令:用于改变组件外观或行为 ngClass ngStyle 结构指令:用于动态添加删除DOM元素来改变DOM布局 ngIf ngFor...优势   编译时间短,除非确实有动态组件需求,否则jit唯一优势就是能用来做在线 Demo开发调试。...angular路由器使用base href 作为组件、模板基地址,开发期间,通常会在index.html所在目录启动服务器,所以这个目录就是根目录,所以可以在index.html 顶部添加<base...当被初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angularOnInit钩子实现,用来初始化组件。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除

    11.1K120

    Angular 数据绑定

    原文链接:Data Binding in Angular - 原文作者 Amit Dhiman 本文采用意译方式 插值绑定: 将动态值插入到模版内容,我们使用 {{}} 符 属性(Property...,为 HTML 元素动态添加或者移除 CSS 名,我们分别使用 [class.class-name]="condition" 或 [ngClass]="{ 'class-name': condition...插值属性绑定 在 Angular ,插值 Interpolation 属性 Property 绑定都用来传递组件数据到模板(视图)。嗯~区别是它们怎么实现这个任务,我们在哪里使用它们。...用法 Interpolation 绑定:用于将动态内容插入到模板 HTML ,例如在文本元素显示组件属性。...总得来说,Interpolation 插值绑定用来在模板展示动态内容,而 Property 属性绑定是用来将组件属性绑定到元素 properties attributes 上。

    19810

    todoMVC_mvc框架是什么

    : string, done: boolean }[] = JSON.parse( window.localStorage.getItem('todos') || '[]'); // 该函数是一个特殊angular...生命周期钩子函数 // 它会在angular应用初始话时候执行一次 ngOnInit() { window.onhashchange = () => { this.hashChangeHandler...() // 当用户点击了锚点时候,我们需要获取当前锚点标识 // 然后动态将根组件visibility设置为当前点击锚点标识 //注意 bind ,不然的话this就变成window了 window.onhashchange...= this.hashChangeHandler.bind(this) } } // 当angular组件数据发生改变时候,ngDoCheck钩子被触发 // 在钩子函数持久化数据 ngDoCheck...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除

    78110

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

    '@angular/platform-browser'; // 这也是一个装饰器,用来定义模块组件相关,比如服务,组件元素,指令,导入导出模块识别 // 每个模块定义必须有这个才能生效...,ng2开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定...b : 会判断item是否有a这个值,防止undefined或者null让视图渲染报错 ---- 最最最常用内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象...,用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历索引保存到你自定义变量index 动态渲染(*ngIf) *ngIf="item"

    6.2K20
    领券