2019獨角獸企業(yè)重金招聘Python工程師標準>>>

?

?

?

Angular提供了一些內(nèi)建的指令，可以作為屬性添加給HTML元素，以動態(tài)控制其行為。

一、內(nèi)建指令

a) *ngIf，可以根據(jù)條件來顯示或隱藏HTML元素。

<div *ngIf='a>b'>show</div>，只有在a>b的時候才會顯示這個div。

b)*ngSwitchCase，可以根據(jù)不同的條件，控制對應的HTML元素的顯示。

<div[ngSwitch]='myVar'>

? <div *ngSwitchCase="'a'">vara</div>

? <div *ngSwitchCase="'b'">varb</div>

? <div *ngSwitchDefault>vardefault</div>

? <div *ngSwitchCase="'b'">varb2</div>

</div>

沒有匹配的條件時，顯示*ngSwitchDefault。如果myVar=’b’，對應的兩個div都會顯示，放在* ngSwitchDefault也不會受影響。

c)ngStyle，用來控制CSS樣式。

<span[ngStyle]="{color: theColor}"[style.font-size.px]="fontSize">

????? red text

</span>

這兒的theColor和fontSize為ts代碼中的屬性。frontSize必須指定單位，如[style.font-size.px]、[style.font-size.em]等。

?

d) Indexof ngFor

?

<div*ngFor="let c of cities;let num=index">

? <div> {{num+1}}-{{c}}</div>

</div>

定義let num=index后，num就可記錄循環(huán)次數(shù)了。

e) ngNonBindable

模型綁定使用{{}}的語法，如果需要輸出{{}}這樣的文本，可以使用ngNonBindable。

<divngNonBindable>{{cities[0]}}</div>

?

二、Form

關于在Angular程序的Form，主要用到三個對象，FormControls用于處理用戶輸入，Validators用于輸入校驗，Observers用于檢測數(shù)據(jù)變化并響應輸入動作。

a)FormControl和FormGroup

FormControl代表輸入框的一個最小單元，然后可以用FormGroup來整合一個Form表單所有的FormControl。

創(chuàng)建Form的方式有兩種，可以在app.module中引入FormsModule或ReactiveFormsModule，要使用Form的功能，必須引入其一。

FormsModule包含的指令為ngModel和NgForm，ReactiveFormsModule包含的指令為formControl和ngFormGroup。

b) 比如創(chuàng)建這樣一個簡單的Form

html為：

這里使用了ngForm，屬于第一種方式FormControl，定義了FormGroup以及(ngSubmit)輸出，并把ngForm綁定到了#f變量，所以onSubmit傳遞的參數(shù)為f.Value，就是當前的FormGroup，點擊提交，拿到的對象為：Object { sku: "xxx" }。

<input type="text"

???????????? id="skuInput"

???????????? placeholder="SKU"

???????????? name="sku" ngModel>

ngModel是NgModel的選擇器，可以使用ngModel=”XXX”的形式指定屬性值，但這里沒有指定值，則采用的是單向綁定的方式，而且通過在input放置ngModel，也創(chuàng)建了一個FormControl，當前只有一個輸入單元name=”sku”。這個FormControl會自動被添加到父元素也就是<form>上。

c) 如果要為已經(jīng)存在的FormGroup或FormControls綁定Form單元，可以使用ReactiveFormsModule的FormBuilder。

?constructor(fb: FormBuilder) {

??? this.myForm = fb.group({

????? 'sku': ['ABC123']

??? });

? }

這段代碼使用了FormBuilder，然后在html模板使用[formGroup]。

?

學習資料：The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda

?

?

轉(zhuǎn)載于:https://my.oschina.net/u/2327858/blog/1518304

總結

以上是生活随笔為你收集整理的Angular基础(五) 内建指令和表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。