当子组件需要向父组件传递信息时需要用到输出属性。
举个栗子:当我们从股票交易所获得股票的实时价格时,希望外部也可以得到这个信息。为了方便,这里的实时股票价格我们通过一个随机数来模拟。这里的子组件我们叫它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> <div> 这是在报价组件外, 股票代码是{{priceQuote.stokcCode}}, 股票价格是{{priceQuote.lastPrice | number:'2.2-2'}} </div>
事件绑定和原生的事件绑定是一样的,都是将事件名称放在()中。
app.component.ts
export class AppComponent{ priceQuote:PriceQuote = new PriceQuote('', 0); priceQuoteHandler(event:PriceQuote){ this.priceQuote = event; } }
这里的event类型就是子组件传递事件的类型。
简单的说,就是子组件通过emit发射事件priceChange,并将值传递出来,父组件在使用子组件时会触发priceChange事件,接收到值。