Angular 8 元件
建立一個元件
- 獨立模板
ng g c user-list
- 內聯模板
ng g c user-list -it
顯示值
插值法
{{}}
繫結值
從資料流向劃分為3 種:
- 資料來源 -> Template
- {{expression}}
- [target]="expression"
- bind-target="expression"
- Template -> 資料來源
- (target)="statement"
- on-target="statement"
- Template <-> 資料來源
- [(target)]="expression"
- bindon-target="expression"
繫結理解的誤區
<button [disabled]="isUnchanged">Save</button>
這並不是將 isUnchanged 的值繫結到了 button 的 disabled attribute 上,而是設定在 該 DOM 元素的 property disabled 上。
HTML attribute 與 DOM property 的對比
- HTML attribute 用來初始化 DOM property
- attribute 一旦設定則不可修改,property 可以修改
- attribute 可以理解為初始值,property 理解為當前值
- attribute 與 property 並不是完全對應的
模板繫結是通過 property 和 event 來工作的,而不是 attribte
繫結目標
繫結的目標可以是 property、event、property+event(雙向)
屬性繫結(property)
-
[property]
形式
<img [src]="url"> -
bind-property
形式
<img bind-src="url">
不應該繫結一個會修改其他任何值的表示式(屬性、函式),這可能會導致意料之外的問題
[hero]="currentHero" 與 hero="currentHero" 是不同的
- [hero]= 將 currentHero 表示式 繫結到 hero property
- hero= 將 currentHero 字面值 賦予 hero attribute
在繫結字串型別值的時候 src="{{url}}" 等價於 [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 繫結
- 指定類名
[class.myClass]="expression",表示式為真,新增類,反之移除。
- 覆蓋 attribute
[class]="expression" 表示式應該返回一個包含類名的字串。
- NgClass
[ngClass]="{ 'myClass1': true, 'myClass2': isClass2 }"
style 繫結
- stye.style-property
<span [style.color]="fontColor">字型顏色</span>
- NgStyle
[ngStyle]="{ 'font-color': '#333', 'font-weight': '700' }"
event 繫結
- (event)
<button (click)="onClick()">click</button>
- on-event
<button (click)="onClick()">click</button>
$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>
$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
。
模板引用變數的作用域是本模板全域性。
- 引用 input 元素
<input #phone placeholder="phone number">
- 引用 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 的型別編譯。