概述

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

演示

Input

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

@Input()protected stockName: string;

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

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

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

• 在子組件中進(jìn)行展示

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

Output

Output的賦值操作不像Input那樣簡單，它需要通過位于@angular/core包下的EventEmitter對象來監(jiān)聽并處理數(shù)據(jù)。并且需要傳入泛型類來規(guī)定參數(shù)類型。

需求

在父子組件中各自定義一個(gè)表示股票價(jià)格的屬性，并通過Output將子組件中的價(jià)格信息傳給父組件。

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

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

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

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);}

此時(shí)子組件的發(fā)射動作已完成，那么如何接收發(fā)射的數(shù)據(jù)呢？

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

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

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

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

其中event對應(yīng)子組件屬性，eventHandler對應(yīng)父組件接收并處理子組件傳來的方法，$event代表泛型類參數(shù)，此處是一個(gè)類型為StockInfo的實(shí)例。

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

<div>股票名稱：{{stockName}}<br>當(dāng)前價(jià)格：{{stockPrice | number:'2.1-2'}} </div>

app.component.html

<div>股票名稱：{{keyWord}}<br>當(dāng)前價(jià)格：{{currentPrice | number:'2.1-2'}} </div>

tips

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

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

相應(yīng)改為：

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

效果

Demo

下載

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Angular4学习笔记（六）- Input和Output的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。