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，看它能不能傳到子組件。

事實證明，子組件值變化後，父組件的值也跟着變化；父組件值變化後子組件的值也跟着變了。

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