详解Angular父子组件通讯

@Input()
  stockCode:string;
  @Input()
  amount:number;

<div>
  我是父组件
</div>
<div>
  <input type="text" [(ngModel)]="stock" placeholder="请输入股票代码">
  <app-order [stockCode]=stock [amount]="100"></app-order>
</div>

export class OrderComponent implements OnInit {

  @Input()
  stockCode:string;
  @Input()
  amount:number;

  constructor() { 
    setInterval(()=>{
      this.stockCode='Apple'
    },3000)
  }

  ngOnInit() {
  }
}

export class PriceQuoteComponent implements OnInit {

  //不连接股票服务，用一个随机数生成器模拟股票价格的变化，并将股票代码和最新的价格显示出来

  stockCode:string="IBM";
  price:number;

  constructor() {
    setInterval(()=>{
      let priceQuote:PriceQuote=new PriceQuote(this.stockCode,100*Math.random());
      this.price=priceQuote.lastPrice;
    },1000)
  }

  ngOnInit() {
  }

}


//封装一个报价对象来封装股票价格信息
//将特定的数据结构用类或接口来明确定义是一个良好的习惯
export class PriceQuote {
  constructor(public stockCode: string, //股票代码
    public lastPrice: number //最新价格
  ) {
  }
}

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

@Component({
  selector: 'app-price-quote',
  templateUrl: './price-quote.component.html',
  styleUrls: ['./price-quote.component.css']
})
export class PriceQuoteComponent implements OnInit {

  //不连接股票服务，用一个随机数生成器模拟股票价格的变化，并将股票代码和最新的价格显示出来

  stockCode: string = "IBM";
  price: number;

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

  constructor() {
    setInterval(() => {
      let priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
      this.price = priceQuote.lastPrice;
      //用lastPrice emit一个值出去
      this.lastPrice.emit(priceQuote);
    }, 1000)
  }

  ngOnInit() {
  }

}
//封装一个报价对象来封装股票价格信息
//将特定的数据结构用类或接口来明确定义是一个良好的习惯
export class PriceQuote {
  constructor(public stockCode: string, //股票代码
    public lastPrice: number //最新价格
  ) {
  }
}

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("priceChange") //发射事件需要写上Output
  //EventEmitter需要一个范型
  lastPrice: EventEmitter<PriceQuote> = new EventEmitter();

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