Angular

Angular Directive(指示)

Angular Directive(指示)

Angular中的Directive 直接翻譯是指令、指示，
我個人比較喜歡指示、指引的翻譯，代表Angular看到這個特別的詞，要去做對應的事情或動作。
指令比較像在Terminal上做的輸入。

Angular中的Directive分成以下三種:

  • 元件型 Component Directive
  • 屬性型 Attribute Directive
  • 結構型 Structure Directive

元件型指示 Component Directive

什麼是元件型指示？
指的就是元件啦！

ex: < app-root >、< app-component >
含有樣板的指示，以標籤(tag)形式呈現

屬性型 Attribute Directive

屬性、樣式
屬性型指令有以下三種：

  • ngStyle
  • ngClass
  • ngModel
ngStyle

app.component.html 檔案內
[ngStyle]="{'font-size': 26 + counter + 'px'}"

1
2
3
4
<div class="container">
    <h1 [ngStyle]="{'font-size': 26 + counter + 'px'}">{{counter}}</h1>
    <input type="button" value="計數器+按了會變大" (click)="count()">
</div>

app.component.ts中設定屬性變數
(click)="count()"

1
2
3
4
5
6
7
8
9
import { Component } from '@angular/core';

export class AppComponent {
    counter = 0;
    count(){
        this.counter++;
    }
}

另一種寫法

ngStyle app.component.html 檔案內 [ngStyle]="getStyle()" 
1
2
3
4
<div class="container">
   <h1 [ngStyle]="getStyle()">{{counter}}</h1>
    <input type="button" value="計數器+按了會變大" (click)="count()">
</div>
app.component.ts中設定屬性變數 (click)="count()" 
1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';

export class AppComponent {
    counter = 0;
    count(){
        this.counter++;
    }
    getStyle(){
        return {('font-size': 26 + this.counter) + 'px'};
    }
}

[style.font-size] 綁定style
[style.color]綁定style
[ngClass]綁定class
app.component.html 檔案內 
1
2
3
4
5
<div class="container">
    <h1 [style.font-size]="(26+counter)+'px'" [style.color]='"green"'>{{counter}}</h1>
    <input type="button" value="計數器+按了會變大" (click)="count()">
    <p [ngClass]="{highlight: counter % 2 == 0}">偶數時會有螢光背景</p>
</div>

css

1
2
3
.highlight{
    background: yellow;
}

也可以改成簡短一點

1
<p [class.highlight]="counter % 2 == 0">偶數時會有螢光背景</p>

全部

1
2
3
4
5
<div class="container">
    <h1 [style.font-size]="(26+counter)+'px'" [style.color]='"green"'>{{counter}}</h1>
    <input type="button" value="計數器+按了會變大" (click)="count()">
   <p [class.highlight]="counter % 2 == 0">偶數時會有螢光背景</p>
</div>

結構型 Structure Directive:會影響到程式流的指令

  • ngIf
  • ngSwitch
  • ngFor
ngIf
符合條件時會動態新增DOM、不符條件時動態移除(是移除而非隱藏) 若該元素被移除，若元素裡面有其他的tag或directive 也會一併被移除。 斬草除根。 app.component.html 檔案內=>HTML 
1
<p *ngIf="counter % 2 == 0">偶數時整個DOM會被移除</p>
ngSwitch
app.component.html 檔案內=>HTML 
1
2
3
4
5
6
7
8
9
10
<div class="container">
    <h1  [style.font-size]="(26+counter)+'px'" [style.color]='"green"'>{{counter}}</h1>
    <input type="button" value="計數器+按了會變大" (click)="count()">

    <div [ngSwitch]="counter % 3">
        <div *ngSwitchCase="1"><p>3N+1</p></div>
        <div *ngSwitchCase="2"><p>3N+2</p></div>
        <div *ngSwitchDefault><p>Default 三的倍數</p></div>
    </div>
</div>
ngFor
*ngFor="let item of list" app.component.ts中設定屬性變數 Ts 
1
2
3
4
5
6
7
8
9
10
export class AppComponent {
    data = [
        {SID: 'S001', name: '王大明', score: 80, 'image-url': 'https://picsum.photos/id/10/200/300', 'self-intro': '<div>大家好，我是王大明。</div>'},
        {SID: 'S002', name: '林一二', score: 99, 'image-url': 'https://picsum.photos/id/20/200/300', 'self-intro': '<div>大家好，我是林一二<br>請各位多多指教。</div>'},
        {SID: 'S003', name: '黃阿道', score: 54, 'image-url': 'https://picsum.photos/id/30/200/300', 'self-intro': '<div>大家好，我是黃阿道<br>我成績不太好<br>請大家多包涵。</div>'},
    ];
    
    
    set = new Set([1, 1, 2, 3, 4, 5, 5, 5]);
}
app.component.html 檔案內=>HTML 
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container" *ngFor="let item of set;">
    <p>{{item}}</p>
</div>
<div class="container d-flex">
    <div class="student border border-dark m-5" id="student0" *ngFor="let item of data">
        <p>學號: {{item.SID}}</p>
        <p>姓名: {{item.name}}</p>
        <img [src]="item['image-url']" alt="大頭照">
        <p>分數: {{item.score}}</p>
        <p class="self-intro" [innerHTML]="item['self-intro']"></p>
    </div>
</div>

參考資料