場景：將報價組件的價格變化傳到父組件當中去
ng g component price-quote
在price-quote.component.ts中
import { Component, OnInit,EventEmitter ,Output} from '@angular/core';
@Component({
selector: 'app-price-quote',
templateUrl: './price-quote.component.html',
styleUrls: ['./price-quote.component.css']
})
export class PriceQuoteComponent implements OnInit {
stcokCode:string = "IBM";
price:number;
@Output() //與@Input剛好相反，記得也要用import引入
lastPrice:EventEmitter<PriceQuote> = new EventEmitter(); //準備用它來發射事件
constructor() {
setInterval(()=>{
let priceQuote:PriceQuote = new PriceQuote(this.stcokCode,100*Math.random()); //使用隨機函數來模擬股票價格的波動，兩個參數一個是股票代碼，一個是股票價格
this.price = priceQuote.lastPrice;
this.lastPrice.emit(priceQuote)
},1000)
}
ngOnInit() {
}
}
export class PriceQuote{ //PriceQuote是自定義的一個類
constructor(public stockCode:string,
public lastPrice:number
){
}}
price-quote.component.html
<div>
這里是報價組件
</div>
<div>
股票代碼是{{stockCode}}，股票價格是{{price |number:"2.2-2"}}
</div>
app.component.ts
import { Component } from '@angular/core';
import {PriceQuote} from "./price-quote/price-quote.component"
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
stock = "";
priceQuote:PriceQuote = new PriceQuote("",0);
//父組件接受數據
priceQuoteHandler(event,PriceQuote){
this.priceQuote = event;
}
}
app.component.html
//這里是通過事件綁定觸發并且捕獲
<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>
<div>這是在報價組件外部，股票代碼是{{priceQuote.stcokCode}}</div>
<div>股票價格是{{priceQuote.lastPrice |number:'2.2-2'}}</div>
最終效果.png
