Angular 資料繫結 (4) - 樣式與類別繫結 - 筆記長也NotesHazuya

Angular 資料繫結 (4) - 樣式與類別繫結

2021-01-11 18:22:00   Angular

樣式繫結(Style Binding)

樣式繫結是與 html 當中的 css style 屬性進行繫結,語法是 [style.樣式名稱]="value",直接看範例:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  textColor="blue";

  setTextColor(color:string){
    this.textColor = color;
  }

}

這裡用一個 textColor 屬性來宣告顏色,而 setTextColor 方法則設定顏色。

app.component.html

<p [style.color]="textColor">{{textColor}}</p>
<button (click)="setTextColor('green')">Green</button>
<button (click)="setTextColor('red')">red</button>
<button (click)="setTextColor('blue')">blue</button>

使用 [style.color] 來繫結 textColor 的值,按鈕則使用事件繫結來呼叫 setTextColor 方法設定顏色。都正確的話效果會是這樣:

1. 如果要一次繫結多個樣式,可以改用 [style] 來繫結,而被繫結的對象會是一系列的樣式字串,例如:'color: "blue"; font-size: 50px;' 這樣一系列的字串。

2.如果指定寬度或高度等有單位的樣式,除了可以使用 [style.width] 之外,也可以直接用 [style.width.px] 來指定單位,有指定單位會傳入數字,沒有指定單位則會傳入字串(須包含單位)。

類別繫結(Class Binding)

類別繫結是直接把 css 檔案繫結 html 標籤當中 class 的值,語法是 [class.名稱]= 條件,一樣直接看範例:

app.component.css

先在 css 設定一些類別

.blueText{
  color: blue;
}

.redText{
  color: red;
}

.greenText{
  color: green;
}

app.component.ts

這個檔案跟上面的是一樣的

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  textColor="blue";

  setTextColor(color:string){
    this.textColor = color;
  }

}

app.component.html

<p [class.blueText]="textColor==='blue'"
   [class.redText]="textColor==='red'"
   [class.greenText]="textColor==='green'"
>{{textColor}}</p>
<button (click)="setTextColor('green')">Green</button>
<button (click)="setTextColor('red')">red</button>
<button (click)="setTextColor('blue')">blue</button>

這裡在 p 標籤使用類別繫結語法,當右邊條件成立就會繫結該屬性,效果和上面是一樣的,但是透過 F12 可以觀察到文字顏色改變是藉由 css 中的 class 來改變的:

如果要繫結多個樣式,也可以使用 [class]={ key: " ", key: " " } 的方式,類別名稱會作為 key ,值則是條件布林值。例如上面的範例就可以改成:[class] = "{blueText : textColor==='blue', redText: textColor==='red', greenText: textColor==='green'}"

 


長也

糾結當中的資管系學生,常碰PHP,喜歡進行網頁相關的設計,閒暇之餘就記錄一些筆記,紀錄自己的學習軌跡。