本文實例講述了Angular4的輸入屬性與輸出屬性。分享給大家供大家參考，具體如下：

Angular4輸入屬性

輸入屬性通常用于父組件向子組件傳遞信息

舉個栗子：我們在父組件向子組件傳遞股票代碼，這里的子組件我們叫它app-order

首先在app.order.component.ts中聲明需要由父組件傳遞進來的值

order.component.ts

...@Input()stockCode: string@Input()amount: string...

order.component.html

<p>這里是子組件</p><p>股票代碼為{{stockCode}}</p><p>股票總數(shù)為{{amount}}</p>

然后我們需要在父組件(app.component)中向子組件傳值

app.component.ts

...stock: string...

app.component.html

<input type="text" placeholder="請輸入股票代碼" [(ngModel)]="stock"><app-order [stockCode]="stock" [amount]="100"></app-order>

這里我們使用了Angular的雙向數(shù)據(jù)綁定，將用戶輸入的值和控制器中的stock進行綁定。然后傳遞給子組件，子組件接收后在頁面顯示。

Angular4輸出屬性

當子組件需要向父組件傳遞信息時需要用到輸出屬性。

舉個栗子：當我們從股票交易所獲得股票的實時價格時，希望外部也可以得到這個信息。為了方便，這里的實時股票價格我們通過一個隨機數(shù)來模擬。這里的子組件我們叫它app.price.quote

使用EventEmitter從子組件向外發(fā)射事件

price.quote.ts

export class PriceQuoteComponent implements OnInit{ stockCode: string = 'IBM'; price: number; //使用EventEmitter發(fā)射事件 //泛型是指往外發(fā)射的事件是什么類型 //priceChange為事件名稱 @Output() priceChange:EventEmitter<PriceQuote> = new EventEmitter(); constructor(){  setInterval(() => {   let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());   this.price = priceQuote.lastPrice;   //發(fā)射事件   this.priceChange.emit(priceQuote);  }) } ngInit(){ }}//股票信息類//stockCode為股票代碼，lastPrice為股票價格export class PriceQuote{ constructor(public stockCode:string,    public lastPrice:number )}

price.quote.html

<p> 這里是報價組件</p><p> 股票代碼是{{stockCode}}</p><p> 股票價格是{{price | number:'2.2-2'}}</p>

接著我們在父組件中接收事件

app.component.html

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote><div> 這是在報價組件外， 股票代碼是{{priceQuote.stokcCode}}， 股票價格是{{priceQuote.lastPrice | number:'2.2-2'}}</div>

事件綁定和原生的事件綁定是一樣的，都是將事件名稱放在（）中。