在 Angular 中實現 ngStyle 指令

Muhammad Adil 2023年1月30日 2022年4月20日
  1. Angular 中的 ngStyle 指令
  2. 在 Angular 中實現 ngStyle 指令的步驟
在 Angular 中實現 ngStyle 指令

Angular 樣式指令允許你將樣式應用於 HTML 元素。ngStyle 指令是 Angular 中 style 指令的變體。

本文將討論 Angular 中 ngStyle 指令的用法。

Angular 中的 ngStyle 指令

ngStyle 指令使用 CSS 選擇器將樣式應用於 HTML 元素。該指令與 Angular 模板引擎一起使用,允許你更好地控制 HTML 文件的呈現方式。

ngStyle 指令是 Angular 中最流行的指令之一。它可以用於各種目的,例如應用自定義 CSS 類和樣式化表單元素。

語法:

<element [ngStyle]="{'styleNames': styleExp}">...</element>

ngStyle 屬性指令的值可以是任何條件二元或三元表示式。此外,它處理控制器中定義的任何方法呼叫,控制器可以根據需要進行控制。

我們還可以使用 ngStyle 指令根據模型值管理檢視和 CSS 樣式,以便執行 ngStyle 並在模型值更改時更新 CSS 樣式。

在 Angular 中實現 ngStyle 指令的步驟

ngStyle 指令很簡單,可以應用於 DOM 中的任何元素。在你的網站上使用它之前,你需要執行幾個步驟。

  • 在你的 Angular 應用程式模組中新增 ngStyle 作為依賴項。
  • 使用 CSS 類或內聯樣式(CSS 程式碼)配置樣式。
  • 在你的 HTML 模板中使用 ngStyle 指令。
  • 使用 ngClass 屬性來指定當元素匹配給定條件時應將哪些 CSS 類應用於元素。

讓我們討論一個使用上述步驟的示例。

TypeScript 程式碼:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    canSave = true;
}

HTML 程式碼:

<h2>Example of ng-style in Angular</h2>
<button
    [ngStyle] = "{
        'backgroundColor' : canSave ? 'pink' : 'blue',
        'color' : canSave ? 'red' : 'yellow',
        'margin-left': '200px',
        'padding': '30px',
        'margin-top': '200px'
    }"
>A simple button</button>

在示例中,我們建立了一個簡單的按鈕,並在 ngStyle 指令的幫助下提供了邊距、填充、字型和背景顏色。

點選這裡檢視上面程式碼的演示。

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 Directive