Angula组件间通讯(2)--组件的输出属性

        在父子组件间，子组件向父组件传输数据，Angular中有一个叫EventEmitter的对象发送自定义的事件。EventEmitter这个方法是在Rxjs中一个类中。要使用这个这个，需要导入angular/core 的这个核心组件。

import { Component, OnInit } from '@angular/core';

1. 定义一个事件方法:

• 用@Output装饰器注解属性。
• 定义一个泛型参数。通常用一个数据结构类或者接口

@Output()
lastPrice: EventEmitter<PriceQuote> = new EventEmitter();


export class PriceQuote{
  constructor(public stockCode: string, public lastPrice: number)
}

2.发送方法

constructor(){
  let priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100);
  this.lastPrice.emit(priceQuote);
}

3. 在父类中接收数据方法

       首先在父组件模版中用事件绑定方式定义一个事件绑定。

<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>

• lastPrice 是事件名称
• priceQuoteHandler($event) 是绑定的方法

然后在控制器中定义事件处理方法priceQuoteHandler

priceQuote: PriceQuote = new PriceQuote("", 0);

priceQuoteHandler(event: PriceQuote){
  this.priceQuote = event;
}

• event: PriceQuote 这个参数类型明确申明为消息类型
• 事件赋值给本地的 this.priceQuote属性上。