Angular自定義組件實現數據雙向數據綁定的實例

2019-11-19 14:45:38

字體：大中小

來源：轉載

供稿：網友

學過Angular的同學都知道，輸入框通過[(ngModel)]實現雙向數據綁定，那么自定義組件能不能實現雙向數據綁定呢？答案是肯定的。

Angular中，我們常常需要通過方括號[]和圓括號()實現組件間的交互：

那么在[]和()的基礎上，如何實現組件的雙向數據綁定？

例子如下。

子組件：

<!--testDataBinding.component.html--><h1>childStatus: {{childStatus}}</h1>

//testDataBinding.component.tsexport class TestDataBindingComponent implements OnInit{ @Input() childStatus; @Output() childStatusChange = new EventEmitter(); ngOnInit(){ setTimeout(()=>{  this.childStatus = false;  this.childStatusChange.emit(this.childStatus); },5000); }}

注意這里的寫法，這是關鍵所在，輸出屬性前半部分必須與輸入屬性相同，輸入屬性可以隨意取名，輸出屬性需在輸入屬性基礎上加上Change，比如你的輸入屬性是myData，那么輸出屬性就必須是myDataChange。

父組件：

<!--app.component.html--><test-binding [(childStatus)]="parentStatus"></test-binding><h1>parentStatus: {{parentStatus}}</h1>

//app.component.tsimport { 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設為false，看它能不能傳到父組件。再過5秒，我們在父組件將parentStatus設為true，看它能不能傳到子組件。