Angular 8 元件

摘要： 建立一個元件 獨立模板 ng g c user-list 內聯模板 ng g c user-list -it 顯示值 插值法 {{}} 繫結值 從資料流向劃分為3 種： 資料來源 -> Tem...

建立一個元件

1. 獨立模板

ng g c user-list

1. 內聯模板

ng g c user-list -it

顯示值

插值法

{{}}

繫結值

從資料流向劃分為3 種：

1. 資料來源 -> Template

• {{expression}}
• [target]="expression"
• bind-target="expression"

1. Template -> 資料來源

• (target)="statement"
• on-target="statement"

1. Template <-> 資料來源

• [(target)]="expression"
• bindon-target="expression"

模板繫結是通過 property 和 event 來工作的，而不是 attribte

繫結目標

繫結的目標可以是 property、event、property+event(雙向)

屬性繫結（property）

1. [property] 形式
   <img [src]="url">
2. bind-property 形式
   <img bind-src="url">

attribute 繫結

也寫特殊的元素的 DOM 中並沒有 property 可供繫結，例如 <td colspan="{{ 1 + 1}}"></td>

元素 td 只有 colspan attribute，而沒有其對應的 property，這時候就只能使用 attribute bind。

使用attr. 繫結 attribute，例如：

<td [attr.colspan]="1 + 1"></td>

css 繫結

1. 指定類名

[class.myClass]="expression"，表示式為真，新增類，反之移除。

1. 覆蓋 attribute

[class]="expression" 表示式應該返回一個包含類名的字串。

1. NgClass

[ngClass]="{ 'myClass1': true, 'myClass2': isClass2 }"

style 繫結

1. stye.style-property

<span [style.color]="fontColor">字型顏色</span>

1. NgStyle

[ngStyle]="{ 'font-color': '#333', 'font-weight': '700' }"

event 繫結

1. (event)

<button (click)="onClick()">click</button>

1. on-event

<button (click)="onClick()">click</button>

&dollar;event

通常，在 angular 中，通過$event事件物件 傳遞事件資訊 ，例如這樣：

<input [value]="name" (input)="name=$event.target.value">

這其實就相當於一個雙向繫結 啦。

EventEmitter

通過 EventEmitter 可以自定義事件，例如：

假設我們有一個對話方塊元件，他有 ok 和 cancel 兩個按鈕：

app-dialog

// html...

<button (click)="ok()"></button>
<button (click)="cancel()"></button>

// ts...
@Output('onConfirm') confirmEvent = new EventEmitter<any>();
@Output('onCancel') cancelEvent = new EventEmitter<any>();

public ok():void {
this.confirmEvent.emit("確認");
}

public cancel():void {
this.cancelEvent.emit("取消");
}

呼叫方

<app-dialog (onConfirm)="func1($event)" (onCancel)="func2($event)"></app-dialog>

&dollar;event 就是 emit 傳遞過來的值

雙向繫結

使用ngModel 指令需要FormsModule ，所以需要提前將 FormsModule 新增到 imports 當中。

雙向繫結就是 屬性繫結與事件繫結 同時修飾同一個 property，至少 bey 是這麼理解的。

假設我們有一個元件，他接受一個叫做 value 的 property，並且對外提供了一個 value 的 change 事件，那麼可以這麼寫到：

<app-value [value]="myvalue" (onValueChange)="myvalue=$event">

angular 覺得這樣寫挺麻煩的，於是搞了一個語法糖 ，結果語句就變成了這樣：

<app-value [(value)]="myvalue">

指令

指令分為兩種：屬性型指令 和結構型指令 。

內建屬性型指令

屬性型指令一般用來處理 property、attribute、event。例如：NgClass、NgStyle、NgModel。

ngModel 指令通過自己的輸入屬性 ngModel 和輸出屬性 ngModelChange 實現雙向繫結，簡化之後的語法糖 就是 [(ngModel)]。

內建結構型指令

結構型指令通常會改變 DOM 結構；例如 NgIf、NgSwitch、NgForOf

ngIf 與 [style.hidden] 是不同的，這與 Vue 的 v-if 與 v-show 類似。 ngIf 會從 DOM 移除元素，而 [style.hidden] 僅僅隱藏元素。

1. 微語法

模板輸入變數

*ngFor="let hero of heroes" [hero]="hero"，let 關鍵字建立了一個叫做 hero 的模板輸入變數 。他的作用域包括宿主元素和其子元素。

2. *ngFor 索引

*ngFor="let hero of heroes; let i=index"

3. *ngFor trackBy

trackBy 用來告訴 *ngFor 如何避免不應該的效能消耗（避免重複的渲染沒有變化的項）

使用 trackBy 需要告訴他需要追蹤的值，例如：

<div *ngFor="let hero of heroes; trackBy: trackByHeroes">
({{hero.id}}) {{hero.name}}
</div>

//...

trackByHeroes(index: number, hero: Hero): number { return hero.id; }

只要 id 沒有發生變化，DOM 就不會重複勞動。

4. NgSwitch

實際上 NgSwitch 包括 3 個指令：

• NgSwitch
• NgSwitchCase
• NgSwitchDefault

用法：

<div [ngSwitch]="currentHero.emotion">
<app-happy-hero*ngSwitchCase="'happy'"[hero]="currentHero"></app-happy-hero>
<app-sad-hero*ngSwitchCase="'sad'"[hero]="currentHero"></app-sad-hero>
<app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
<app-unknown-hero*ngSwitchDefault[hero]="currentHero"></app-unknown-hero>
</div>

NgSwitch 是一個 屬性指令，他只修改了行為，沒有修改結構，所以不需要*

5. 模板引用變數

語法：

#var
或
ref-var

模板引用變數通常用來引用模板中的某個DOM 或Angular元件 或指令 或Web Component 。

模板引用變數的作用域是本模板全域性。

1. 引用 input 元素

<input #phone placeholder="phone number">

1. 引用 ngForm 指令

<form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
<div class="form-group">
<label for="name">Name
<input class="form-control" name="name" required [(ngModel)]="hero.name">
</label>
</div>
<button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
</form>
<div [hidden]="!heroForm.form.valid">
{{submitMessage}}
</div>

對比	模板引用變數	模板輸入變數
宣告方式	#var/ref-var	let var
作用域	整個模板	宿主、子元素

輸入輸出屬性

1. 輸入屬性

帶有@Input 裝飾器的可設定屬性 ，一般用於屬性繫結 。

@Input('width')，本元件接受一個叫做 width 的屬性繫結。例如：<app-component [width]="width"></app-component>

2. 輸出屬性

帶有@Output 裝飾器的可觀察物件 屬性，一般用於輸出事件 。

@Output('onClick') clicks = new EventEmitter<string>();

對外提供一個可供繫結的名為onClick 的事件，該事件的引數是一個string 。

模板表示式操作符

1. 管道操作符(|)

管道是一個函式，適合在模板表示式中，處理包括：資料顯示格式、過濾、排序這樣的操作；該函式接受一個輸入值，返回結果。

一般用法

<div>Hello {{world | uppercase}}</div>

管道函式可以是連續的使用：

<div>Hello {{wORld | lowercase | uppercase}}</div>

傳參：

<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>

2. 安全導航操作符(?.)

觀看該案例：

<span>{{person.name}}</span>

當 person 為 undefined 時，該程式碼會報錯。修改為如下後不會報錯：

<span>{{person?.name}}</span>

3. 非空斷言操作符(!)

{{person!.name}} 只有在開啟了 TypeScript 嚴格空值檢查時，才會用到。

型別轉換函式 $any

當表示式無法檢測出某個物件包含指定的欄位（屬性）時，可以使用 $any 讓其不進行 TypeScript 的型別編譯。