• @Input：「父組件」傳「子組件」的行為。
• @Output：「子組件」傳「父組件」的行為。

使用 @Input() 宣告一個變數，等於開啟可傳入「子組件」的大門。

@Input() status: boolean;

在 html 可透過 property binding 把值('value')傳入「子組件」，如下:

<app [status]="'value'"></app>

每當 @Input 有值的「變化」時，可透過 ngOnChanges 進行偵測，其中「參數 changes」可取得 @Input「變化前」與「變化後」的值。

ngOnChanges(changes: SimpleChanges) {
  if (changes['status'] && changes['status'].currentValue) {
    // do something
  }
}

使用 @Output() 宣告一個 EventEmitter，作為一個可傳入「父組件」的事件發射器。

@Output() statusChange = new EventEmitter<boolean>();

使用事件發射器(statusChange)的 emit() 方法，把需傳入「父組件」的資料作為「參數」發射。

this.statusChange.emit('value');

在 html 可透過 event binding 來取得「子組件」發射後的資料。

作為參數的 $event 其實就是傳入「父組件」的資料。

<app (statusChange)="onStatusChange($event)"></app>