數(shù)據(jù)綁定

以下所有的例子都基于你已經創(chuàng)建好了一個angular項目。
所有的數(shù)據(jù)綁定，都需要你在ts文件中準備好你需要的數(shù)據(jù)。

1. 模板綁定/ 插值綁定

首先在ts文件中準備好需要的數(shù)據(jù)，然后在html文件中用{{}}使用數(shù)據(jù)。插值綁定更多的是用于顯示數(shù)據(jù)，最簡單的例子如下：

// html 文件，例如 test.component.html
<h1>{{name}}</h1>
// ts 文件，例如 test.component.ts
public name:string = 'Sun';

2. 屬性綁定

2.1 DOM屬性綁定
優(yōu)先使用DOM屬性綁定，語法是 [property] = "variable"，基本屬性例如 id，class，title等等；

// html 文件
One: <input type='text' [value]="myName" />
Three: <input type='text' value="{{myName}}" />
// ts 文件
public myName:string = 'Sun';

2.2 HTML 屬性綁定
[attr.屬性名字="表達式"]，表達式的值會被綁定。例子如下：

// html 文件
<table>
    <tr>
      <th>Test</th>
      <th>Binding</th>
    </tr>
    <tr>
      <td [attr.colspan] = "tableColspan">仙女蘿</td>
    </tr>
</table>

// ts文件
public tableColspan:string = '2';

為了看上去更清晰，我給table加了點css，效果如下：

attr屬性綁定

2.3 css類綁定 （3種方式）

• 方式一： 直接使用 [class] 綁定，這樣的綁定方式會覆蓋之前所有別的class樣式。

// html 文件
<h1 class="apple" [class]="useClass">One</h1>

// ts 文件
public useClass:string = 'banana';

// css 文件
h1 {
    text-align: center;
}
.apple {
    color: skyblue;
    font-size: 20px;
}
.banana {
    color: orange;
}

效果如下：

class綁定一

• 方式二：使用 [class.樣式名字]="boolean"，表達式的值為布爾類型; 通過表達式的值來判斷是否追加這個class。

// html 文件
<h1 [class.apple]="isSpecial">Two</h1>

// ts 文件
public isSpecial:boolean = true;

效果如下（圈出來的這個藍色的鴨）：

class綁定二

圖標樣式也可以通過這個來添加的，例子如下：

<span *ngFor="let star of stars" class="glyphicon glyphicon-star"
[class.glyphicon-star-empty]="star"></span>

// ts 文件
private stars: boolean[];
this.stars = [false, false, true, true, true];

• 方式三： [ngClass]="對象"

// html 文件
<div [ngClass]="{a:isA, b:isB, c:isC}">嚶嚶嚶</div>
// ts 文件
public isA:boolean = true;
public isB:boolean = true;
public isC:boolean = true;
// css 文件
.a {
    border: 1px solid black;
}
.b {
    color: pink;
}
.c {
    text-align: center;
    font-size: 22px;
}

效果如下：

class綁定三

2.4 樣式綁定

• 綁定單個樣式的

// html 文件
<h2 [style.color]="isSpecial?'green':'orange'">奇變偶不變</h2>
<h2 [style.color]="pinkColor">符號看象限</h2> 
// ts 文件
public isSpecial:boolean = true;
public pinkColor:string = 'pink';

效果如下：

樣式綁定

• 綁定多個樣式
  喜歡哪種用哪種鴨，例子如下：

// html文件 （那個 ft 記得在ts里面申請一個boolean類型的變量）
<div [ngStyle]="{'font-style':ft?'italic':'normal', 
'border': '1px solid black', 'width': '200px'}"> 
  一白遮百丑，一胖毀所有。
</div>

// html 文件
<div [ngStyle]="multiStyle"></div>
// ts 文件
public multiStyle: any = {
  color: pink,
  width: 200px,
  ... ...
}

3. 事件綁定

小括號表示這是個事件綁定，括號內是事件的名稱。 $event 是事件對象，如果用不上可以不寫，不傳。
語法：(event)="xxx($event)"

// html 文件
<button (click)="clickMe()">點我鴨</button>
// ts 文件
clickMe():void {
  alert("鴨！你點我干啥！");
}

通過 $event 對象取得用戶輸入

<input (keyup)="onKey($event)">
<p>{{values}}</p>

// ts文件
public values:string = '';
onKey(event:any) {
    this.values += event.target.value + ' | ';
}  

模板引用變量（通過在標識符前加上#實現(xiàn)），這個真的很實用！很實用！很實用！一定要看兩眼噠?。?/p>

// html 文件中
<input #box (keyup)="onKey(box.value)">
<p>{{values}}</p>

// ts 文件中
public values:string = '';
onKey(value: string) {
  this.values = value;
}

監(jiān)聽用戶按下enter鍵，獲取輸入框的值

<input #box (keyup.enter)="values=box.value">
<p>{{values}}</p>

BLUR(失去焦點)事件

<input #box (keyup.enter)="values=box.value"
 (blur)="values=box.value">
<p>{{values}}</p>

4. 雙向綁定

雙向綁定其實就是屬性綁定和事件綁定的結合。
語法： [(ngModel)]="xxx"
注意：如果你要使用 ngModel這個語法，一定一定一定要在 app.module.ts文件中導入 FormsModule:

FormsModule

下面是雙向綁定的例子：

// html 文件
<div>
  Input: <input [(ngModel)]="content">
</div>
Content: {{content}}

// ts 文件
public content:string = 'aaa';

分解看看就是這樣：

// html 文件
<div>
  Input: <input type="text" #a [value]="content"
  (input)="inputChange(a.value)" /> 
</div>
Content: {{content}}

// ts 文件
public content:string = 'aaa';
inputChange(data) {
  this.content = data;
}

效果如下：

效果鴨

指令

angular中有3種類型的指令：組件指令、屬性指令、結構指令。
1. 組件指令，舉個例子：<router-outlet>
2. 屬性指令，在上文中其實已經提及過了。就是[ngClass], [ngStyle] 這兩個東西，具體用法在上文中也已經給了一些例子，這里就不詳細的再解釋一遍了。
3. 結構指令，在介紹結構指令之前，先重點的注意一下 *；結構指令中，星號是一個 “語法糖”，所以在使用結構指令的時候，千萬別忘記加*。

• *ngIf 指令
  語法：*ngIf="表達式"
  我們可以通過使用 *ngIf這個指令向DOM中添加或者移除某個元素。

<p *ngIf="true">如果條件為真，那么你可以看到這段文字。</p>

• *ngFor 指令
  語法：*ngFor="表達式"
  下面例子中的let person of people的意思是：
  取出people數(shù)組中的每個person，并在每次迭代時使用。
  let i = index是獲取當前的索引，并且賦值給i。

<li *ngFor="let person of people; let i=index">
  {{i+1}} --- {{person.name}}
</li>

// ts 文件
public people:any[] = [
  {name:'sun', age: 18},
  {name:'Lee', age: 21}
];

效果如下：

*ngFor指令例子效果