Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例
學(xué)過(guò)Angular的同學(xué)都知道，輸入框通過(guò)[(ngModel)]實(shí)現(xiàn)雙向數(shù)據(jù)綁定，那么自定義組件能不能實(shí)現(xiàn)雙向數(shù)據(jù)綁定呢？答案是肯定的。
Angular中，我們常常需要通過(guò)方括號(hào)[]和圓括號(hào)()實(shí)現(xiàn)組件間的交互：
那么在[]和()的基礎(chǔ)上，如何實(shí)現(xiàn)組件的雙向數(shù)據(jù)綁定？
例子如下。
子組件：
<!--testDataBinding.component.html-->
<h1>childStatus: {{childStatus}}</h1>
//testDataBinding.component.ts
export class TestDataBindingComponent implements OnInit{
@Input() childStatus;
@Output() childStatusChange = new EventEmitter();
ngOnInit(){
setTimeout(()=>{
this.childStatus = false;
this.childStatusChange.emit(this.childStatus);
},5000);
}
}
注意這里的寫法，這是關(guān)鍵所在，輸出屬性前半部分必須與輸入屬性相同，輸入屬性可以隨意取名，輸出屬性需在輸入屬性基礎(chǔ)上加上Change，比如你的輸入屬性是myData，那么輸出屬性就必須是myDataChange。
父組件：
<!--app.component.html-->
<test-binding [(childStatus)]="parentStatus"></test-binding>
<h1>parentStatus: {{parentStatus}}</h1>
//app.component.ts
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
parentStatus: boolean = true;
ngOnInit(){
setTimeout(()=>{
this.parentStatus = true;
},10000);
}
}
在父組件我們初始化parentStatus為true，并把它傳到子組件TestDataBindingComponent。
在子組件里，5秒后我們把childStatus設(shè)為false，看它能不能傳到父組件。再過(guò)5秒，我們?cè)诟附M件將parentStatus設(shè)為true，看它能不能傳到子組件。
事實(shí)證明，子組件值變化后，父組件的值也跟著變化；父組件值變化后子組件的值也跟著變了！
我們實(shí)現(xiàn)了雙向綁定！
查看本文代碼和效果，可點(diǎn)擊這里。
以上這篇Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié)
這篇文章主要介紹了關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
詳解angular中通過(guò)$location獲取路徑(參數(shù))的寫法
本篇文章主要介紹了詳解angular中通過(guò)$location獲取路徑(參數(shù))的寫法 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕
本篇文章主要介紹了ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
angularjs實(shí)現(xiàn)下拉列表的選中事件示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)下拉列表的選中事件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
再談Angular4 臟值檢測(cè)(性能優(yōu)化)
這篇文章主要介紹了再談Angular4 臟值檢測(cè)(性能優(yōu)化)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
angularjs下ng-repeat點(diǎn)擊元素改變樣式的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs下ng-repeat點(diǎn)擊元素改變樣式的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了用AngularJs驗(yàn)證表單實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
Angular7創(chuàng)建項(xiàng)目、組件、服務(wù)以及服務(wù)的使用
這篇文章主要介紹了Angular7創(chuàng)建項(xiàng)目、組件、服務(wù)以及服務(wù)的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了angular實(shí)現(xiàn)商品篩選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
AngularJS使用ng-options指令實(shí)現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果，ng-option指令使用也很簡(jiǎn)單，下文具體給大家說(shuō)明，對(duì)angularjs 下拉框知識(shí)感興趣的朋友一起看下吧2016-08-08