溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關Angular中怎么自定義雙向數據綁定，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
@Input綁定
對于一個component，他里面定義了@Input()標識的屬性，這些屬性用來接收對應的html標簽中attribute的值。如：
// 在component中定義custom
@Input() custom: string;
// 在標簽中使用
<xxx custom="dawang"></xxx>
通過這樣的用法就可以給component中的custom賦值，內容是“dawang”。這樣只是靜態賦值，沒有實現數據的綁定。數據的單向綁定是使用[], 如：
<xxx [custom]="data"></xxx>
其中data是ts文件中定義的一個變量，假設給data賦值： data='dawang'，這樣，通過數據的單向綁定[]，在component中的custom的值就是'dawang'，而不是data。數據綁定的是變量，通過綁定就可以把變量的內容傳入component中。
既然是雙向綁定，有input肯定就有output了。
在angular的component中可以定義@Output標識的EventEmitter對象。如：
@Output() update = new EventEmitter();
在html中就可以這樣使用
<xxx (update)="doUpdate($event)"></xxx>
// ts中定義doUpdate方法
doUpdate(event:any) {
// do something
}
此時的update就是用來做反向綁定的屬性，將doUpdate綁定到update上，以此來接收從component中傳出的update的值。update的傳值需要手動觸發
this.update.emit('ok');
手動觸發后，就可以在doUpdate中獲取此值，其中event的值就是'ok'。
至此，我們看到了angular數據的正向和反向的綁定，但兩者是分開的，所以都叫單向綁定，那么怎么才能雙向綁定呢。
同時使用]就是實現雙向綁定的方式，使用雙向綁定的同時，還需要對component進行改造。
@Input() custom: string;
// 增加下面的output綁定
@Output() customChange = new EventEmitter();
這樣就可以實現[(custom)]的雙向綁定。通過component代碼可以發現，[(custom)]等效于
<xxx [custom]="data" (customChange)="data = $event"></xxx>
以上就是Angular中怎么自定義雙向數據綁定，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
