中间人模式

app HTML

<app-pricequote (buy)="buyHandler($event)"></app-pricequote>
<div>从子组件拿到的股票代码是{{priceQuote.stockCode}}.股票的价格是{{priceQuote.lastprice | number:'00.1-2'}}</div>
<app-order [priceQuote]="priceQuote"></app-order>

app TS

export class AppComponent {
  priceQuote: PriceQuote = new PriceQuote('', 0);

  // tslint:disable-next-line:typedef
  buyHandler(event: PriceQuote){
    this.priceQuote = event;
  }
}

pricequote HTML

<div>
  股票代码是{{stockId}},股票价格是{{price | number: '00.1-2'}}
</div>
<div>
  <input type="button" value="购买股票" (click)="buyStock($event)">
</div>

priceQuote TS

  buyStock(event): void{
    this.buy.emit(new PriceQuote(this.stockId, this.price));
    return null;
  }

order HTML

<div>我要买100手的{{priceQuote.stockCode}}的股票，价格是{{priceQuote.lastprice | number:'00.1-2'}}股票！</div>

order TS

export class OrderComponent implements OnInit {
  @Input()
  priceQuote: PriceQuote;
  constructor() {
  }

  ngOnInit(): void {
  }

}