元件通訊有兩種方式：

• 父到子（用@Input裝飾器）
• 子到父（用@Output裝飾器）

注意： 輸入輸出針對的物件 是 父子元件

1）父到子

父到子的資料傳遞其實就是通過將子元件上的一個屬性繫結到父元件的一個屬性上，一般我們使用@Input()屬性裝飾器來實現。

動手操作例項一：

• 新建專案 connInComponents：ng new connInComponents
• 新增元件 stock：ng g c stock
• 在 stock.component.ts 中新增屬性 stockName 並將其標記為 @Input()：

@Input() protected
 
 stockName: string;

• 既然有 @Input() 則應有對應的父元件，此處使用預設生成的主元件 app
  在父元件中定義屬性 keyWork 並通過檢視檔案 app.component.html 中的標籤 <input> 來進行雙向繫結，最後在檢視檔案 app.component.html 中嵌入子元件並進行賦值：

// app.component.ts
protected keyWord: string;

// app.component.html
<input type="text" placeholder="請輸入股票名稱" [(ngModel)]="keyWord"
 
>
<app-stock [stockName]="keyWord"></app-stock>

注意：[(ngModel)] 需要在 app.module.ts 中引入模組 FormsModule

這樣就完成了父元件向子元件賦值的操作了

在子元件中進行展示

<p>
    stock works!
</p>
<div>
    股票名稱：{{stockName}}
</div>

動手操作例項二：

• 新建專案 countDemo：ng new countDemo
• 新增元件 counter：ng g c counter

// counter.component.ts
@Input() count: number = 0;

increment() {
    this.count++;
}

decrement() {
    this.count--;
}

// counter.component.html
<p>當前值：{{count}}</p>
<button (click)="increment()"> + </button>
<button (click)="decrement()"> - </button>

// app.component.ts
initialCount: number = 5;

// app.component.html
<app-counter [count]="initialCount"></app-counter>

動手操作例項三：

• 新建專案 countDemo：ng new countDemo
• 新增元件 counter：ng g c counter

// counter.component.ts
@Input() content: string;

// counter.component.html
Child: {{content}}

// app.component.ts
i: number = 0;
constructor() {
    setInterval(() => {
        this.i++;
    }, 1000)
}

// app.component.html
<h2>Parent</h2>
<app-counter [content]="i"></app-counter>

小結（父到子）：

• 子元件
  
  • @Input() 定義一個輸入
• 父元件
  
  • 使用子元件中定義的@Input()

如果不理解上述例子如何繫結的話請看我前一篇部落格 基礎（三）：資料繫結

2）子到父

使用EventEmitter從子元件向外發射事件

動手操作：

• 新建專案 countDemo：ng new countDemo
• 新增元件 counter：ng g c counter

// counter.component.ts
@Output() changeNumber: EventEmitter<number> = new EventEmitter();
Number: number = 0;
constructor() {
    setInterval(() => {
        this.changeNumber.emit(++this.Number);
    }, 1000);
}

// counter.component.html  這裡不用更改

// app.component.ts
i: number = 0;

numberIChange(i:number) {
    this.i = i;
}

// app.component.html
<h2>Parent: {{i}}</h2>
<app-counter (changeNumber)="numberIChange($event)"></app-counter>

小結（子到父）：

• 子元件
  
  • @Output() 定義一個輸出
  • 寫一個自定義方法，通過emit，觸發@Output
• 父元件
  
  • 使用子元件中定義的@Output()
  • $event必須，$event是父元件通過emit傳過來的

通過 子元件的輸入輸出屬性 和 父元件的屬性繫結和事件繫結 可以實現父子元件之間的資料傳遞

注：只有第一個例子寫的比較詳細，後面幾個因為差不多所以不做過多解釋，如還有疑惑請留言。