如何使用 Angular ngClass 来设置组件的样式
介绍
在本指南中，我们将了解 Angular 的ngClass指令。您将简要了解ngClass的语义和语法，我们还将查看 Angular 源代码并观察ngClass 的底层工作原理。
概述
您可以使用ngClass指令有条件地将一对多类或样式应用于元素，从而为您提供一种同时操作多个类或样式的有效方法。
您可能会发现其他替代方案也有一些缺点。
例如，使用 Angular 的类绑定，一次只能有条件地应用一个类。原生样式和类属性静态地应用一对多类或样式。每当您在 Angular 的类和样式绑定或原生属性上使用NgClass和NgStyle时，请考虑以下几点：
- 您正在应用一个或多个类别或样式吗？
- 您是以静态方式还是动态方式应用类或样式？
<!-- Native Class/Style attributes -->
<input class="is-warning my-button" style="border: none; color: blue">
<!-- Angular class and style Bindings -->
<input [class.is-warning]="booleanProp" [style.border]="borderProp">
<!-- ngClass -->
<input [ngClass]="{'is-warning': booleanProp, 'myButton': true}">
<input [ngClass]="isWarningBtn">
<!-- ngStyle -->
<input [ngStyle]="{'border': borderProp, 'color': colorProp}">
<input [ngStyle]="hasColorBorder">
<!--
booleanProp, borderProp, etc...
would be properties from our
Typescript class
-->
您可以使用 Angular 模板语法使用NgStyle和NgClass指令将条件样式与 Angular 的属性和事件绑定相结合。
类
NgClass可以通过内联声明或 TypeScript 类的属性或方法获取输入。你可能认为语法比实际更复杂。最终，NgClass可以将以下内容作为输入：
• 空格分隔的字符串
[ngClass]="is-info-element is-item 没有边框"
• 字符串数组
[ngClass]="['is-info-element', 'is-item', '没有边框'"]
• 目的
[ngClass]="{'is-info-element': true, 'is-item': true}
所有前面的示例都是内联的，只要表达式返回有效输入，您就可以用 Typescript 属性或方法替换它们。
export class MyComponentClass {
myStringProperty = "is-info is-item has-border";
myArrayProperty = ['is-info', 'is-item', 'has-border'];
myObjectProperty = {'is-info': true, 'is-item': true};
}
• [ngClass]="myStringProperty"
• [ngClass]="myArrayProperty"
• [ngClass]="myObjectProperty"
只要三元语句返回有效的字符串、对象或数组，它们就是有效的输入。
例如：
[ngClass]="name ==='erxk'?'is-author':'is-reader'
引擎盖下
下面是如何使用NgClass的示例。
<button type="button" class="big-font" [ngClass]="klassStyler">Submit</button>
<div>
<label for="one">Terms of Service</label>
<input #one id="one" type="checkbox" (change)="updateTos(one.checked)">
<label for="two">Send Usage Information</label>
<input #two id="two" type="checkbox" (change)="updateUsage(two.checked)">
</div>
以下是组件 javascript：
export class StatusButtonComponent implements OnInit {
tosSign = false;
sndUsage = false;
// [ngClass]="klassStyler"
klassStyler = {
warning: false,
info: false,
error: !this.tosSign,
success: this.tosSign,
}
// ...
updateStyle() {
this.klassStyler.error = !this.tosSign;
this.klassStyler.success = this.tosSign && this.sndUsage;
this.klassStyler.warning = this.tosSign && !this.sndUsage;
}
}
以下是 CSS：
.warning {
background: hsl(48, 100%, 67%);
border: 5px solid hsl(58, 100%, 67%);
color: black;
}
.error {
background: hsl(348, 100%, 61%);
border: 5px solid hsl(248, 100%, 61%);
color: white;
}
.success {
以下是示例代码中的一些主要要点：
• 你的按钮元素已应用NgClass指令。
• 您的NgClass输入是来自 Typescript 类的klassStyler。klassStyler检查有效的对象表达式。
• klassStyler上的属性与代码中的 CSS 类的名称相匹配。
• NgClass将附加类，而不是覆盖。您的按钮仍将应用class=" big-font" 。
• 您正在更新 Typescript 类中 HTML 元素上的 CSS 类。
结论
我们已经研究了如何使用ngClass Angular 指令来实现多个类的条件样式。我们在这个用例中使用了 Angular 的属性和事件绑定。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~