将类添加到 Angular 中的元素

Muhammad Adil 2023年1月30日 2022年4月20日
  1. 添加没有 Angular 4 的类
  2. 使用 Angular 4 中的 ClassName 属性向元素添加类
  3. 使用 Angular 4 中的 NgClass 指令向元素添加类
将类添加到 Angular 中的元素

Angular 4 是一个用于构建 Web 应用程序的框架。它建立在 TypeScript 之上,并且具有许多使其比 Angular 2 更强大、更灵活的特性。

使 Angular 4 更强大的特性之一是向元素添加类的概念。

在 Angular 4 中向元素添加类的最简单方法是使用带有 NgClass 指令的 HTML 属性选择器语法。

此语法可用于任何 HTML 标记,并允许你一次应用多个类,然后可以根据其他指令或样式表规则的需要应用这些类。

本文将全面介绍在 Angular 4 中向元素添加类。

在我们这样做之前,我们将检查如何使用传统的 JavaScript 分配类与如何在 Angular 中分配它们。

添加没有 Angular 4 的类

流行的 JavaScript 库 Angular 提供了一种使用 NgClass 指令执行此操作的方法。该指令允许你轻松地动态地从元素中添加和删除类。

但是,如果你不使用 Angular,那么还有其他几种方法可以使用 JavaScript 来完成此任务。

一个名为 addClass 的 jQuery 插件允许你轻松地将类添加到任何元素,只要它已使用 jQuery 进行了初始化。你还可以使用 JavaScript 中的 .setAttribute() 方法并在被操作的 DOM 节点上设置 className 属性。

使用 Angular 4 中的 ClassName 属性向元素添加类

要直接绑定到 Angular 4 中的 className 属性,我们将使用 ClassName 属性。它将类添加到任何元素,使用选择器后的括号或通过点语法 ClassName 访问。

<div
    [className]="isActive ? 'active' : 'inactive'">
</div>

如果 isActive 返回 true,则添加 active 类;否则,inactive 保持不变。

使用 Angular 4 中的 NgClass 指令向元素添加类

NgClass 指令有很多用例。最常见的一种方法是在用户单击元素时向元素添加类。

NgClass 指令允许你根据特定条件向元素添加类。例如,当用户单击一个组件时,你可以将活动类添加到该元素。

NgClass 指令很有帮助,因为它允许你从 Angular 应用程序的元素中动态添加和删除类。此外,指令本身的适应性很强,可以根据输入做各种事情。

例如,假设我们想使用 NgClass 分配一个静态类。让我们讨论一下它的语法。

<div [ngClass]="'Class-Name'">/div>

NgClass 也可以同时分配多个静态类名。

<div [ngClass]="['Class-Name', 'other-class']">/div>

在 Angular 4 中向元素添加类的完整示例

HTML 代码:

<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>
<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>

CSS 代码:

p {
    font-family: Lato;
}
.blue {
    background-color: blue;
}
.red-border {
    border: 2px solid red;
}
*{
    color: white;
}

TypeScript 代码:

import { Component, ViewChild, OnInit, Renderer2, ElementRef, } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular 4';
    something = 'first';
    constructor(private renderer: Renderer2) {}
}

点击此处查看上述示例的演示。

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相关文章 - Angular Element