本篇文章給大家分享的是有關(guān)Angular中怎么自定義雙向數(shù)據(jù)綁定，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。
創(chuàng)新互聯(lián)建站專注于中大型企業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)和網(wǎng)站改版、網(wǎng)站營(yíng)銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開(kāi)發(fā)的融合，累計(jì)客戶上千家，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對(duì)接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專注高端網(wǎng)站設(shè)計(jì)和互聯(lián)網(wǎng)程序開(kāi)發(fā)，在前進(jìn)的路上，與客戶一起成長(zhǎng)！
@Input綁定
對(duì)于一個(gè)component，他里面定義了@Input()標(biāo)識(shí)的屬性，這些屬性用來(lái)接收對(duì)應(yīng)的html標(biāo)簽中attribute的值。如：
重慶分公司
重慶分公司
// 在component中定義custom
@Input() custom: string;
// 在標(biāo)簽中使用
通過(guò)這樣的用法就可以給component中的custom賦值，內(nèi)容是“dawang”。這樣只是靜態(tài)賦值，沒(méi)有實(shí)現(xiàn)數(shù)據(jù)的綁定。數(shù)據(jù)的單向綁定是使用[], 如：
其中data是ts文件中定義的一個(gè)變量，假設(shè)給data賦值： data='dawang'，這樣，通過(guò)數(shù)據(jù)的單向綁定[]，在component中的custom的值就是'dawang'，而不是data。數(shù)據(jù)綁定的是變量，通過(guò)綁定就可以把變量的內(nèi)容傳入component中。
既然是雙向綁定，有input肯定就有output了。
在angular的component中可以定義@Output標(biāo)識(shí)的EventEmitter對(duì)象。如：
@Output() update = new EventEmitter();
在html中就可以這樣使用
// ts中定義doUpdate方法
doUpdate(event:any) {
// do something
}
此時(shí)的update就是用來(lái)做反向綁定的屬性，將doUpdate綁定到update上，以此來(lái)接收從component中傳出的update的值。update的傳值需要手動(dòng)觸發(fā)
this.update.emit('ok');
手動(dòng)觸發(fā)后，就可以在doUpdate中獲取此值，其中event的值就是'ok'。
至此，我們看到了angular數(shù)據(jù)的正向和反向的綁定，但兩者是分開(kāi)的，所以都叫單向綁定，那么怎么才能雙向綁定呢。
同時(shí)使用]就是實(shí)現(xiàn)雙向綁定的方式，使用雙向綁定的同時(shí)，還需要對(duì)component進(jìn)行改造。
@Input() custom: string;
// 增加下面的output綁定
@Output() customChange = new EventEmitter();
這樣就可以實(shí)現(xiàn)[(custom)]的雙向綁定。通過(guò)component代碼可以發(fā)現(xiàn)，[(custom)]等效于
以上就是Angular中怎么自定義雙向數(shù)據(jù)綁定，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
