0%

Angular 筆記 - 屬性型指令

angular

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

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 跟屬性欄位,這邊命名 classNamehighlight,其值為可以被 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