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

學過Angular的同學都知道，輸入框通過[(ngModel)]實現雙向數據綁定，那麼自定義組件能不能實現雙向數據綁定呢？答案是肯定的。
Angular中，我們常常需要通過方括弧[]和圓括弧()實現組件間的交互：

那麼在[]和()的基礎上，如何實現組件的雙向數據綁定？
例子如下。
子組件：

<!--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);
  }
}

註意這裡的寫法，這是關鍵所在，輸出屬性前半部分必須與輸入屬性相同，輸入屬性可以隨意取名，輸出屬性需在輸入屬性基礎上加上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設為false，看它能不能傳到父組件。再過5秒，我們在父組件將parentStatus設為true，看它能不能傳到子組件。

事實證明，子組件值變化後，父組件的值也跟著變化；父組件值變化後子組件的值也跟著變了！
我們實現了雙向綁定！
查看本文代碼和效果，可點擊這裡。