這次帶給大家Angular4輸入與輸出怎麼使用，使用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>股票总数为{{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的雙向資料綁定，將使用者輸入的值和控制器中的stock綁定。然後傳遞給子元件，子元件接收後在頁面顯示。
Angular4輸出屬性
# 當子元件需要傳遞訊息給父元件時需要用到輸出屬性。
# 舉個栗子：當我們從股票交易所獲得股票的即時價格時，希望外部也可以得到這個資訊。為了方便，這裡的即時股票價格我們透過一個隨機數字來模擬。這裡的子元件我們叫它app.price.quote
使用EventEmitter從子元件向外發射事件
# price.quote.ts
export class PriceQuoteComponent implements OnInit{
stockCode: string = 'IBM';
price: number;
//使用EventEmitter发射事件
//泛型是指往外发射的事件是什么类型
//priceChange为事件名称
@Output()
priceChange:EventEmitter<PriceQuote> = new EventEmitter();
constructor(){
setInterval(() => {
let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());
this.price = priceQuote.lastPrice;
//发射事件
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>
<p>
这是在报价组件外， 股票代码是{{priceQuote.stokcCode}}，
股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}
</p>事件綁定和原生的事件綁定是一樣的，都是將事件名稱放在（）中。
app.component.ts
export class AppComponent{
priceQuote:PriceQuote = new PriceQuote('', 0);
priceQuoteHandler(event:PriceQuote){
this.priceQuote = event;
}
}這裡的event類型就是子元件傳遞事件的類型。
簡單的說，就是子元件透過emit發射事件priceChange，並將值傳遞出來，父元件在使用子元件時會觸發priceChange事件，接收到值。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Angular4輸入與輸出怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
