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

在Angular 9中,[ngClass]/[class]和[className]有什么不同?

在Angular 9中,[ngClass]/[class]和[className]是用于动态设置HTML元素的class属性的指令或属性。

  1. [ngClass]/[class]指令:[ngClass]是Angular的内置指令,用于动态设置HTML元素的class属性。它可以接受一个对象、数组或字符串作为参数。
  • 对象参数:可以根据条件动态添加或移除class。例如,可以根据某个条件设置一个或多个class:[ngClass]="{ 'class1': condition1, 'class2': condition2 }"。
  • 数组参数:可以根据一组条件动态添加或移除class。例如,可以根据多个条件设置一个或多个class:[ngClass]="[condition1 ? 'class1' : 'class2', condition3 ? 'class3' : 'class4']"。
  • 字符串参数:可以直接设置一个或多个class。例如,可以设置一个或多个class:[ngClass]="'class1 class2'"。

推荐的腾讯云相关产品:无

  1. [className]属性:[className]是Angular的属性绑定语法,用于动态设置HTML元素的class属性。它接受一个字符串作为参数。
  • 字符串参数:可以直接设置一个或多个class。例如,可以设置一个或多个class:[className]="'class1 class2'"。

推荐的腾讯云相关产品:无

总结:

  • [ngClass]/[class]指令和[className]属性都可以用于动态设置HTML元素的class属性。
  • [ngClass]/[class]指令更加灵活,可以根据条件动态添加或移除class,支持对象、数组和字符串参数。
  • [className]属性相对简单,只能直接设置一个或多个class,只支持字符串参数。

更多关于Angular 9的相关信息,请参考腾讯云官方文档:Angular 9 文档

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

相关·内容

Java中抽象类(abstract class接口(interface)什么不同

Java 中的抽象类(abstract class接口(interface)是两种常见的抽象化机制,它们都可以被用于定义一些具有一定抽象特性的东西,例如 API 或者系统中的某些模块。...尽管抽象类接口有着相似之处,但也有明显的区别。下面将详细介绍这两个概念的不同点。 1、抽象类 抽象类是指不能直接实例化的类,只能被用来派生其他类,它被设计成为仅包含可继承的方法、属性变量。...抽象类通常用于类层次结构的根部建立一个适当的上下文语境。常见的抽象类特征如下: 抽象类可以包含成员变量成员方法,也可以包含抽象方法以及非抽象方法。...2、接口 接口抽象类一样也是一种特殊类型的类,它仅声明了一组或者多组方法以及常量,可以被看作是一个对外公开的 API 契约。接口 Java 中属于比抽象类更加抽象的概念。...3、抽象类接口的区别 抽象类接口都可以理解为一种模板或契约,它们之间虽然相似点,但也存在很多不同之处。

42020

5G到底厉害什么地方?4G什么不同

4G的局限 不知道你有没有这种经验,集会、演唱会、或者什么人很多的会场,会忽然发现4G网络瘫痪了,虽然手机上显示网络的连接信号还是很强,但是数据根本发送不出去,也接收不进来。...那么为什么不可能在4G的基础上,通过提高基站的功率带宽实现两种网络的融合呢?...今天大家使用IoT设备,要么是通过蓝牙和你相联之后再上网,要么是通过家里的Wi-Fi联网,要么是设备里插上电话卡,总之不能直接联网。...上面说了这么多次的IoT,那么IoT究竟是什么呢?...当然,下面来说两点: 网速的上限已经确定 我们现在的通信方式主要就是两种,无线通信有线通信。

80720

Angular 6.x 基础教程

本系列教程的主要内容来源于 egghead.io get-started-with-angular 视频教程,但针对视频中的介绍的知识点做了适当地补充,建议兴趣的同学直接查看该视频教程。...那为什么前缀是 app 呢?...第三节 - 事件模板引用 Angular 中,我们可以使用 (eventName) 语法,进行事件绑定。此外,可以使用 #variableName 的语法,定义模板引用。...第十节 - 组件样式 Angular 中,我们可以设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件的内联样式外联样式。...用过 AngularJS 1.x 的同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态的添加或移除对应的样式。 Angular 中,对应的指令是 ngClass

15.6K20

Angular: 最佳实践

Note: 本文中,我将尽量避免官方 Angular Style Guide 提及的模式有用的实践,而是专注我自己的经验得出的东西,我将用例子来说明。...类型规范 Typing 我们主要是用 TypeScript 去编写 Angular(也许你只是用 JavaScript 或者谷歌的 Dart 语言去写),Angular 被称为 TYPEScript 也是原因的...注意我们是怎么组件类上创建一个 statuses 字段,以便我们可以模版中使用这个枚举。但是假如我们多个组件中使用这个枚举呢?或者假如我们要在不同的组件使用其他枚举呢?我们需要不停创建这些字段?...你的应用程序可以不同的 API 端进行交互,因此我们希望将他们移动到字符串枚举中,而不是硬编码中体现,如下: enum UserApiUrls { getAllUsers = 'users/getAll...请记住,无论你做了什么决定,请保持前后一致(别钻牛角尖...)。 本文是译文,采用的是意译的方式,其中加上个人的理解注释,原文地址是:medium.com/codeburst/a…

2.8K40

【玩转腾讯云】手把手教你使用VueReactAngular三大框架开发Pagination分页组件

如果同一个组件,用不同的框架实现,会有什么不同呢? 带着这个想法,我分别选用目前最火的Vue/React/Angular三大框架,去实现一个简单的Pagination分页组件。...3.3 Angular版本 Vue/React这种专注View视图层的轻量级框架不同Angular是一个很重的框架,配备非常完整,Web开发过程中你需要的一切,Angular框架都给你提供好了,你只需要随手取用即可...Vue/React的差别比较大: 一是外部传参方式不同Angular使用@Input这个装饰器表示外部参数; 二是Angular使用ngFor指令渲染列表数据; 三是Angular优化DOM对比的方式是使用...Vue不同的是,React不需要对外发射事件之类的操作,传什么事件进来直接就发射出去了; 另一个不同是定义插槽的方式,React使用props.children代表组件标签中间传入的内容。...6.4.1 第1步:实现首/尾页翻页逻辑 先做模板,pager.component.html中编写以下代码: <li [ngClass]="{

7.7K00

AngularDart4.0 指南- 表单 顶

模板驱动的形式 您可以通过使用本页中描述的特定于表单的指令技术Angular模板语法中编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...创建一个基本的表单 一个Angular表单两个部分:一个基于HTML的模板一个组件类,以编程方式处理数据用户交互。 从课程开始,因为它简要地说明了英雄编辑可以做什么。...p模板输入变量每次迭代中是不同的power; 您使用插值语法显示其名称。 与ngModel的双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...删除#spy模板引用变量使用它的诊断。 作为类绑定的替代方法,可以使用NgClass指令来设置控件的样式。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: (增强的)表单元素上定义一个模板引用变量。 多处的按钮中引用该变量。

17.4K30

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

---- 基础概念 国内的官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2的一堆为什么:...依赖了哪些文件,哪些作用 index.html <!...typings.d.ts : 全局变量声明的文件 testconfig.*.json: 不同模式下调用的tsconfig配置文件 app目录下(分的很彻底,写起来跟常规基本一样) app.component.css...,src,class,style]等,双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量, (click)="": 事件绑定[视图触发改变数据源],同上,支持表达式方法。。...b : 会判断item是否a这个值,防止undefined或者null让视图渲染报错 ---- 最最最常用的内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象

6.2K20

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动的方式,好维护理解。。...--#UserName 是局部变量,若是ngmodel,拿到的就是一个响应对象,若是非ngmodel绑定的,则是dom元素代码--> <!...; Submit()函数内,点击提交的时候对整个表单一一去判断,传统方式基本这样 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 ---- 数据驱动...)="onSubmit(form)"> <div class="form-group" [ngClass]="{ 'has-danger': form.controls.UserName.invalid...不足之处或者错误之处请留言指出,会及时跟进修正。。谢谢

3.8K20

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

模板语句解析器与模板表达式解析器不同,特别支持基本的赋值(=)链接表达式(with;) 但是,某些Dart语法是不允许的: new const 递增递减运算符,++ -- 赋值运算符,例如 +...但是它也与你习惯的HTML很大的不同。 它需要一个新的心智模式。 HTML开发的正常过程中,您可以使用HTML元素创建一个可视结构,并通过使用字符串常量设置元素属性来修改这些元素。...一个没有属性的世界 Angular的世界中,属性(attributes)的唯一作用是初始化元素指令状态。...元素属性(property)可能是更常见的目标,但Angular首先查看名称是否是已知指令的属性(property),如下例所示: [ngClass]...Angular什么提供属性(attribute)绑定? 当没有要绑定的元素属性时,必须使用属性绑定。 考虑ARIA,SVGtable span属性。 他们是纯粹的属性。

5.1K10

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

angular-cli 启动 src是开发目录,生产打包后会产生一个dist目录; 初步说下你从启动到浏览器看到app works!依赖了哪些文件,哪些作用 index.html <!.../app/app.module'; // 环境配置文件,可以写入接口路径什么的。。dev,prod各一份 import { environment } from '.....*.json: 不同模式下调用的tsconfig配置文件 app目录下(分的很彻底,写起来跟常规基本一样) app.component.css : 根样式文件,配置了scss就是.scss app.component.html...,src,class,style]等,双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量, (click)="": 事件绑定[视图触发改变数据源],同上,支持表达式方,特殊之处后面解释...b : 会判断item是否a这个值,防止undefined或者null让视图渲染报错 最常用的内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象,用来动态判断增加多个样式

9210

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

Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强的Angular绑定系统获得相同的结果。 当你可以写一个简单的绑定时为什么要创建一个指令来处理点击呢?...许多Angular包(如RouterForms包)都定义了自己的属性指令。 本节介绍最常用的属性指令: NgClass:添加删除一组CSS类。 NgStyle:添加删除一组HTML样式。...NgClass 您通常通过动态添加删除CSS类来控制元素的显示方式。 你可以绑定到ngClass来同时添加或删除多个类。 class绑定是添加或删除单个类的好方法。 <!...heroForm的值是什么? heroForm是一个Angular NgForm指令的引用,可以跟踪表单中每个控件的值有效性。 原生元素没有form属性。...想象一下,诸如a.b.c.d这样的长属性路径中的某个地方防止空值。 Angular安全导航操作符(?.)是一种更为流畅方便的方法来防止属性路径中出现空。表达式达到第一个空值时会被释放。

29.9K20

NG2.4.10升级NG4正式版:修正AOT打包报错的一些问题

然后到群里各种吼,无损升级,没有什么奇葩问题,大家放心升级。。 我信了。。。把公司的项目给升级了,然后就开始掉坑了。。。 普通的开发模式打包模式皆正常,不正常的是AOT打包。。...解决方案: 任何[(ngModel)]的变量必须在组件内声明 全局变量也必须在组件内声明,比如你html中写了这种表达式(click)="temp = $event" , temp必须声明 ----...具体去看最新的api(v4)老版本api(v2)的比较-- 解决方案:使用get来获取嵌套表单的响应值,新的写法比较直观也好维护,嘎嘎,看代码 // 旧版本。2.4.10及以下可以生效的。。...复制代码 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';.../delete.component.scss'] }) export class DeleteComponent implements OnInit { @Input() item: any;

39210
领券