Angular：實現組件間雙向數據綁定

學過Angular的同窗都知道，輸入框經過[(ngModel)]實現雙向數據綁定，那麼父子組件間能不能實現雙向數據綁定呢？答案是確定的。
Angular中，咱們經常須要經過方括號[]和圓括號()實現組件間的交互：

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

<!--child.component.html-->

<h1>status in child: {{childStatus}}</h1>
<button (click)="toggle()">Toggle childStatus</button>

//child.component.ts

export class ChildComponent implements OnInit{
  @Input() childStatus;
  @Output() childStatusChange = new EventEmitter();
  ngOnInit(){
    
  }
  toggle(){
        this.childStatus = !this.childStatus;
        this.childStatusChange.emit(this.childStatus);
  }
}

注意這裏的寫法，這是關鍵所在，輸出屬性必須在輸入屬性的基礎上加上‘-Change’後綴。好比你的輸入屬性是myData，那麼輸出屬性就必須是myDataChange。

父組件：

<!--app.component.html-->

<test-binding [(childStatus)]="parentStatus"></test-binding>

<h1>status in parent: {{parentStatus}}</h1>
<button (click)="toggle()">Toggle parentStatus</button>

//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(){
    
  }
  toggle(){
    this.parentStatus = !this.parentStatus;
  }
}

在父組件咱們初始化parentStatus爲true，並把它傳到子組件ChildComponent。
在子組件裏，經過按鈕咱們能夠改變childStatus的值，能夠看到，子組件中的值改變的同時，父組件的值也跟着改變了。反過來，在父組件中經過按鈕改變parentStatus的值，子組件中的值一樣也跟着變化：

很簡單對不對？！
你能夠在這裏查看和在線編輯本文代碼，並實時查看效果！