在 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 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