在使用angular時，我們都知道輸入框可以通過[(ngModel)]實現數據雙向綁定，不可避免更多的會使用到組件之間互相傳值，通常通過方括號[]和圓括號()實現組件之間的傳值，只是以單向傳值的方式會變得尤為繁瑣，那么組件之間是不是也可實現像[(ngModel)]一樣雙向綁定互相傳值的方式？
舉個栗子~
實現通過點擊父組件按鈕顯示子組件dialog，點擊dialog確定按鈕，關閉隱藏dialog。
1 // app.component.html 2 <h1>我是父組件</h1>
3 <button (click)="clickBtn()">點擊我觸發child組件</button>
4 <child [(isShow)]="isShow"></child>
1 // app.component.ts
2 import { Component, OnInit } from '@angular/core'; 3 @Component({ 4 selector: 'app', 5 templateUrl: './app.component.html', 6 styleUrls: ['./app.component.css'] 7 }) 8 export class AppComponent implements OnInit { 9 isShow: boolean = false; 1
11 ngOnInit(){}
13 clickBtn() { 14 this.isShow = true; // 初始化isShow值為true傳給子組件 15 } 16
17 }
此時子組件接收到父組件傳過來的isShow的值：
1 // child.component.html 2 <div class="dialog_box" *ngIf="isShow">
3 <h1>我是子組件，是否將我關閉？</h1>
4 <p><span (click)="submit()">確定</span></p>
5 </div>
1 import { Component, OnInit, EventEmitter } from '@angular/core'; 2
3 @Component({ 4 selector: 'child', 5 templateUrl: './child.component.html', 6 styleUrls: ['./child.component.css'] 7 }) 8
9 export class ChildComponent { 10 @Input() isShow: Boolean; 11 @Output() isShowChange = new EventEmitter(); 12 14 submit(){ 15 this.isShow = false;
this.isShowChange.emit(this.isShow); 16 } 17 }
以上，就實現了組件之間雙向綁定，同時需要注意的地方，輸出屬性必須在輸入屬性的基礎上加上“change”后綴，這里是不可以隨便命名的，比如輸入屬性的變量名為data，那么傳回給父組件接收的輸出屬性必須為dataChange。