迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

在 Angular 中使用 ngClass 添加条件类

作者:迹忆客 最近更新:2023/04/14 浏览次数:

我们将介绍如何在我们的 Angular 应用程序中添加条件类或使用 if-else 条件来显示带有 ngClass 的动态类。


在 Angular 中使用 ngClass 添加条件类

类是设计和创建应用程序 UI 的核心部分。我们根据分配给应用程序不同部分的类编写设计。

有时我们必须根据条件添加动态类或更改类。

本教程将讨论在 Angular 中的 ngClass 中实现 if-else 语句的不同方法。

让我们使用以下命令创建一个新应用程序。

# angular
ng new my-app

在 Angular 中创建我们的新应用程序后,我们将使用此命令转到我们的应用程序目录。

# angular
cd my-app

现在,让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# angular
ng serve --open

让我们从一个简单的示例开始,如果条件消息设置如下 app.component.ts 中所示,我们将尝试向 HTML 元素添加一个类。

# angular
import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    message = 'warning';
}

现在,让我们使用 app.component.html 中的变量 message 添加一个带有 ngClass 的 HTML 元素。

# angular
<div [ngClass]="{'warning': message}">
Hello this is a warning message
</div>

然后,让我们根据以下条件将一些 CSS 代码添加到我们在 div 中添加的类中。

# angular
.warning {
    font-family: Lato;
    background: red;
    color: white;
    padding: 10px;
}

输出:

Angular 中 ngclass 中的 If 语句

从示例中可以看出,在 ngClass 中使用 if 语句很容易。我们直接根据条件添加了一个类。

现在,我们将通过一个示例,在该示例中,我们将根据真实条件添加一个类。如果条件为假,我们将添加不同的类。

因此,首先,我们将在 app.component.html 中添加一个条件,并添加一个带有单击事件的按钮来更改条件,如下所示。

# angular
<div [ngClass]="Warnmessage ? 'warning' : 'info'">
    Hello this is a warning message
</div>
<button (click)=changeClass()>Click this</button>

现在,让我们创建一个变量 Warnmessage 和一个在单击按钮时将更改条件的函数。我们在 app.component.ts 中的代码将如下面的代码片段所示。

# angular
import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    name = 'Angular ' + VERSION.major;
    Warnmessage = true;

    changeClass() {
        this.Warnmessage = false;
        console.log('Button Clicked');
    }
}

让我们运行这段代码并检查它是如何工作的。

输出:

Angular 示例中 ngClass 中的 If Else 语句

如你所见,我们在 ngClass 中也使用了 if-else 语句,并且它适用于条件。但是如果你想基于单个条件添加多个类,也可以通过添加一个空格并在其后写一个新的类名来完成。

# angular
<div [ngClass]="Warnmessage ? 'warning message-box' : 'info message-box'">
    Hello this is a warning message
</div>
<button (click)=changeClass()>Click this</button>

我们还可以通过在第一个类名后添加一个空格并写第二个类名来添加多个类。我们甚至可以添加三重类或我们想要的任意数量。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便