Angular 8 組件

建立一個組件

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"

綁定理解的誤區

<button [disabled]="isUnchanged">Save</button>

這並非將 isUnchanged 的值綁定到了 button 的 disabled attribute 上，而是設置在 該 DOM 元素的 property disabled 上。

HTML attribute 與 DOM property 的對比

1. HTML attribute 用來初始化 DOM property
2. attribute 一旦設置則不可修改，property 能夠修改
3. attribute 能夠理解爲初始值，property 理解爲當前值
4. attribute 與 property 並非徹底對應的

模板綁定是經過 property 和 event 來工做的，而不是 attribte

綁定目標

綁定的目標能夠是 property、event、property+event(雙向)

綁定目標彙總表

屬性綁定（property）

1. [property] 形式
   <img [src]="url">
2. 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 綁定

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 的類型編譯。