Angular4中的输出属性

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>

<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事件，接收到值。