將類新增到 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