本篇文章為大家展示了怎么在Angular2中綁定數據，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯是一家集網站建設,白銀企業(yè)網站建設,白銀品牌網站建設,網站定制,白銀網站建設報價,網絡營銷,網絡優(yōu)化,白銀網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

使用插值表達式將一個表達式的值顯示在模版上

{{productTitle}}

使用方括號將HTML標簽的一個屬性值綁定到一個表達式上

使用小括號將組件控制器的一個方法綁定到模版上面的一個事件的處理器上

按鈕綁定事件

注意

在開始下面的例子之前，請先確認已經新建了一個工程。如果沒有，請查看：Angular2學習筆記之Angular CLI 安裝和使用教程

事件綁定

準備工作

了解目的：在模版的界面上面增加一個按鈕，然后通過小括號綁定一個事件。

新建一個 bind 組件，使用命令:  ng g c bind

修改 bind.component.html

按鈕綁定事件

修改 bind.component.ts

//在 BindComponent 類方法中增加方法體
onClickButton(event: any){
 console.log(event);
}

修改 app.component.html

圖示：

Dom屬性綁定

例子一

插值表達式 與 屬性綁定 之間的關系

兩種方式都可以實現，angular 在實現的邏輯上面是： 在程序加載組件的時候，會先將 "插值表達式" 翻譯為 "屬性綁定"

修改 bind.component.html

修改 bind.component.ts

//增加變量
imgUrl: string = http://placehold.it/320x280;

圖示：

例子二

dom 屬性 與 html 屬性的區(qū)別

HTML元素的 DOM屬性和 HTML 屬性是有部分區(qū)別的，這點需要明確差異。

修改 bind.component.html

修改 bind.component.ts

//增加 event事件
onInputEvent(event: any){
 //獲取的是 dom 屬性，即輸入屬性
 console.log(event.target.value);

 //獲取的是 html 屬性，也就是初始化的屬性
 console.log(event.target.getAttribute("value"));

}

圖示：

總結：

1.少量的 HTML屬性和 DOM屬性之間有這 1 ：1 的映射關系，如 :id
2.有些有 HTML屬性，沒有DOM 屬性， 如：colspan
3.有些有 DOM屬性，沒有HTML 屬性，如：textContent
4.就算名字一樣，DOM屬性和HTML屬性獲取的內容可能不一樣
5.模版綁定是通過DOM屬性綁定的，而不是通過HTML屬性
6.HTML屬性指定了初始值，DOM屬性表示當前值；DOM屬性的值可以改變，HTML的值不能改變

例子部分完整代碼

bind.component.html

 bind works!


按鈕綁定事件


 
 

 
 



 

bind.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-bind',
 templateUrl: './bind.component.html',
 styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

 imgUrl: string = "http://placehold.it/320x280";

 constructor() { }

 ngOnInit() {
 }

 onClickButton(event: any){
  console.log(event);
 }

 onInputEvent(event: any){
  //獲取的是 dom 屬性，即輸入屬性
  console.log(event.target.value);

  //獲取的是 html 屬性，也就是初始化的屬性
  console.log(event.target.getAttribute("value"));
 }
}

上述內容就是怎么在Angular2中綁定數據，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站標題：怎么在Angular2中綁定數據-創(chuàng)新互聯
文章來源：http://weahome.cn/article/ceppjs.html