在 Angular 中使用 ngClass 新增條件類

我們將介紹如何在我們的 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;
}

輸出：

從示例中可以看出，在 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');
    }
}

讓我們執行這段程式碼並檢查它是如何工作的。

輸出：

如你所見，我們在 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>

我們還可以通過在第一個類名後新增一個空格並寫第二個類名來新增多個類。我們甚至可以新增三重類或我們想要的任意數量。