详解Angular父子组件通讯(2)

export class AppComponent { stock = ""; priceQuote: PriceQuote = new PriceQuote("", 0); //event的类型就是子组件emit的时候发射出来的数据的类型 //父组件中通过event就可以拿到 priceQuoteHandler(event:PriceQuote){ this.priceQuote=event; } }

模版

<!--默认情况下，事件名字就是output输出属性的名字--> <app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote> <div> 这是在报价组件外部<br/> 股票代码是{{priceQuote.stockCode}}, 股票价格是{{priceQuote.lastPrice | number:"2.0-2"}} </div>

默认情况下，事件名字就是output输出属性的名字，可以改变事件名字，通过

@Output("priceChange") //发射事件需要写上Output //EventEmitter需要一个范型 lastPrice: EventEmitter<PriceQuote> = new EventEmitter();

模版中也改为

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

总结

通过输出属性发射事件，并通过事件携带数据，在父组件模版中通过事件绑定的方式来捕获并处理。

如果两个组件之间不存父子关系，如何以一种松耦合的方式来传递数据。此时需要使用中间人模式。