Angular開發(三)-關於屬性繫結與事件繫結

Angular開發(三)-關於屬性繫結與事件繫結

一、新建一個專案工程並建立一個元件bind,如果還有不知道怎麼建立angular專案的請先檢視Angular2從環境搭建到開發建議直接用angular-cli建立

二、資料繫結

  • 插值的方式[比較常見],就是把利用(金甲二模板:{{ 插入的內容}})來展現component裡面的資料

在bind.component.html頁面中
<p>1.我是採用插值的方式的:</p>
<span>{{title}}</span>
  • 1
  • 2
  • 3

在bind.component.ts檔案中
....
export class BindComponent implements OnInit {
title:string = "我是子元件插值的方式顯示的";
....
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 屬性繫結 
    • 使用金甲二的模板插入值
    • 使用[屬性]=“值”進行屬性繫結(屬性如果不加[],那麼就直接是傳統的賦值,加上[]就是angular中屬性繫結)

<p>2.屬性繫結:</p>
<img src="{{src}}"/>
<p>3.屬性繫結:</p>
<img [src]="src"/>
  • 1
  • 2
  • 3
  • 4

biind.component.ts檔案程式碼
src:string = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png";
  • 1
  • 2
  • 3
  • 事件繫結 
    事件繫結

<p>4.事件繫結:</p>
<input type="button" value="按鈕" (click)="info($event)"/>
  • 1
  • 2

bind.component.ts檔案
info(event:any){
console.log(event);
}
  • 1
  • 2
  • 3
  • 4

三、DOM繫結與HTML屬性繫結的區別

DOM繫結HTML繫結
相同情況下一個元素的id 
有html屬性無dom屬性 表格中td的colspan
有dom屬性無html屬性textContent屬性 
關於值dom表示當前值html表示初始化值
關於可變dom值是可變的html值是不可變的

總結:我們模板繫結是通過DOM屬性來操作的,不是HTML屬性來操作的

四、HTML繫結


table style="border-collapse:collapse" border="1" width="100%">
<tr>
<td>第一個</td>
<td>第二個</td>
</tr>
<tr>
<td [attr.colspan]="sizeNum">我佔2格子</td>
</tr>
</table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

五、class類的繫結

  • 直接使用[class]DOM繫結會覆蓋之前的class

<div class="a b" [class]="classname"></div>
//bind.component.ts檔案
classname:string = "c";
  • 1
  • 2
  • 3
  • 使用[class.類名]=”boolean”來判斷是否追加這個class

<div class="a b" [class.c]="isShow"></div>
//bind.component.ts檔案
isShow:boolean = true;
  • 1
  • 2
  • 3
  • 使用物件顯示

<div [ngClass]={a:isA,b:isB,c:isC}></div>
//bind.component.ts檔案
isA:boolean = true;
isB:boolean = true;
isC:boolean = true;
//或者
<div [ngClass]="classGroup"></div>
//bind.component.ts檔案
classGroup:any = {
a:true,
b:true,
c:true
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

六、樣式繫結

  • 繫結單個樣式

<p [style.color]="isRed?'red':'blue'">我是測試樣式的</p>
<p [style.color]="redColor">我是測試樣式的</p>
//bind.component.ts檔案
isRed:boolean = true;
redColor:string = "red";
  • 1
  • 2
  • 3
  • 4
  • 5
  • 帶單位的

<p [style.font-size.em]="fontSize?1:3">我是測試樣式的</p>
//bind.component.ts
fontSize:boolean = false;
  • 1
  • 2
  • 3
  • 繫結多個樣式

<div [ngStyle]="styleGroup"></div>
//bind.component.ts
styleGroup:any = {
width:"100px",
height:"100px",
border:"1px solid #ddd",
margin:"20px"
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

七、雙向繫結

雙向繫結僅僅是之前的屬性繫結與事件繫結的結合,所以是[(ngModel)]=”“


<p>雙向資料繫結:</p>
<input type="text" [(ngModel)]="user.name"/>
<div [ngStyle]="style1">{{user.name}}</div>
//ts程式碼
user:any = {
name:""
}