提姆寫程式

0%

Angular 筆記 - 屬性型指令

發表於 分類於 Disqus：
ngModel、ngStyle、ngClass

angular

屬性型指令有一個特性，就是不會有自己的 Template，但套用此指令會修改元素的外觀或行為，內建有 ngModel、 ngStyle 跟 ngClass 便可以自由地變更元素的樣式。

ngModel

也就是雙向繫結，此篇便不贅述。

透過雙向綁定實現網頁互動

假如今天有一個按鈕，在點擊 +1 一次，就會使網頁標題的數字 +1，點擊 reset 就可以歸零，可以這樣寫。

在 HTML 中寫入一個按鈕跟文字，並雙向綁定該文字為 counter，

app.component.html

1
2
3
<h3>點擊按鈕後數字會加總 {{counter}}</h3>
<button (click)="addCounter()">+1</button>
<button (click)="reset()">reset</button>

app.component.ts

寫入方法。

1
2
3
4
5
6
7
8
9
10
11
export class AppComponent {
  counter = 0;
  constructor() {}
  addCounter() {
    this.counter++;
  }

  reset() {
    this.counter = 0;
  }
}

ngStyle

點擊 font-size +1pt 按鈕一下，就讓字體變大，反之，點擊 font-size -1pt，字體變小。

app.component.html

在要變大的 <h3> 上加上 ngStyle，並綁定屬性與要給予的值，fontSize 要增加的變數，單位要用引號括住才會有效果。

1
2
3
4
5
<h2>ngStyle</h2>
<h3 [ngStyle]="getStyle()">點擊按鈕使字體變大</h3>
<p>字體從 12pt 起跳</p>
<button (click)="addFontSize()">font-size + 1pt</button>
<button (click)="minusFontSize()">font-size -1pt</button>

app.component.ts

把加總的方法寫入。

1
2
3
4
5
6
7
addFontSize() {
   this.fontSize++;
 }

 minusFontSize() {
   this.fontSize -= 1;
 }

改寫 ngStyle

但如果把物件寫在 HTML 裡面，會有點長又有點亂，可以將 ngStyle 改寫，先在 app.component.ts 建立一個方法，命名為 getStyle() 的方法，並將 ngStyle 裡面的物件貼到 component 中，並且要記得在 fontSize 前要加一個 this，代表指向這個變數，當讀取到這個方法時，就 return 這個值。

app.component.ts

1
2
3
getStyle() {
   return { 'font-size': 12 + this.fontSize + 'pt' };
 }

app.component.html

HTML 就把原本放物件的地方改成方法。

1
<h3 [ngStyle]="getStyle()">點擊按鈕使字體變大</h3>

ngClass

用法跟 ngStyle 很像，輸入 ngClass，就會出現要綁定的 className 跟屬性欄位，這邊命名 className 是 highlight，其值為可以被 2 整除的時候改變顏色，要注意的是 className 要用引號包住。

1
2
3
4
5
<h2>ngClass</h2>
<h3 [ngClass]="{'highlight': counter % 2 == 0}">
  點擊偶數值的時候修改標題顏色
</h3>
<button (click)="addCounter()">Change Color</button>

同步增加 CSS 的內容

1
2
3
.highlight {
  color: red;
}

方法沿用 addCounter()，方法，所以在 Demo 頁中會看到數字為偶數時，有綁定 ngClass 屬性型指令的標題會變成紅色。

Demo

https://stackblitz.com/edit/angular-ivy-lxdvik?file=src/app/app.component.html