Angular4學習筆記（六）- Input和Output

概述

Angular中的輸入輸出是通過注解@Input和@Output來標識，它位於組件控制器的屬性上方。
輸入輸出針對的對象是父子組件。

演示

Input

• 新建項目connInComponents:ng new connInComponents.
• 新增組件stock:ng g component stock.
• 在stock.component.ts中新增屬性stockName並將其標記為輸入@Input():

  @Input()
  protected stockName: string;

• 既然有@Input()則應有對應的父組件，此處使用默認生成的主組件app.
  在父組件中定義屬性keyWork並通過視圖文件app.component.html中的標簽<input>來進行雙向綁定，最后，在視圖文件app.component.html中嵌入子組件並進行賦值:

//ts
protected keyWord: string;

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

注意，[(ngModel)]需要在app.module.ts中引入模塊FormsModule。
這樣就完成了父組件向子組件賦值的操作了。

• 在子組件中進行展示

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

Output

Output的賦值操作不像Input那樣簡單，它需要通過位於@angular/core包下的EventEmitter對象來監聽並處理數據。並且需要傳入泛型類來規定參數類型。

需求

在父子組件中各自定義一個表示股票價格的屬性，並通過Output將子組件中的價格信息傳給父組件。

• 由於EventEmitter需要傳入泛型類，因此我們首先定義一個股票信息類：

export class StockInfo {
  constructor(public name: string, public price: number) {
    this.name = name;
    this.price = price;
  }
}

• 在子組件stock.component.ts中新增屬性stockPrice和event，並在初始化方法中為stockPrice賦值並通過event將當前綁定對象發射出去:

  protected stockPrice: number;
  @Output()
  protected event: EventEmitter<StockInfo> = new EventEmitter();

  ngOnInit() {
    setInterval(() => {
      const stock: StockInfo = new StockInfo(this.stockName, 100 * Math.random());
      this.stockPrice = stock.price;
      this.event.emit(stock);
    }, 3000);
  }

此時子組件的發射動作已完成，那么如何接收發射的數據呢？

• 在父組件中定義價格屬性currentPrice和接收方法eventHandler：

  protected currentPrice: number;

  eventHandler(stock: StockInfo) {
    this.currentPrice = stock.price;
  }

• 在嵌入的子組件視圖元素<app-stock>上添加綁定關系：

<app-stock [stockName]="keyWord" (event)="eventHandler($event)"></app-stock>

其中event對應子組件屬性，eventHandler對應父組件接收並處理子組件傳來的方法，$event代表泛型類參數，此處是一個類型為StockInfo的實例。

此時賦值操作已經完成，在父子組件的視圖文件中添加顯示接收到的信息（股票價格）即可：
stock.component.html

<div>
  股票名稱：{{stockName}}<br>當前價格：{{stockPrice | number:'2.1-2'}}
</div>

app.component.html

<div>
  股票名稱：{{keyWord}}<br>當前價格：{{currentPrice | number:'2.1-2'}}
</div>

tips

@Output可以傳遞參數，其值與嵌入的子組件視圖元素<app-stock>上綁定的數據名稱統一。
如@Output('lastPrice'),那么

<app-stock [stockName]="keyWord" (event)="eventHandler($event)"></app-stock>

相應改為：

<app-stock [stockName]="keyWord" (lastPrice)="eventHandler($event)"></app-stock>

效果

Demo

下載