Angularの親子コンポーネント通信の詳細な説明

@入力（）
  在庫コード: 文字列;
  @入力（）
  量:数値;

<div>
  私は親コンポーネントです</div>
<div>
  <input type="text" [(ngModel)]="stock" placeholder="株コードを入力してください">
  <app-order [stockCode]=在庫 [amount]="100"></app-order>
</div>

OrderComponentクラスをエクスポートし、OnInitを実装します。

  @入力（）
  stockCode: 文字列;
  @入力（）
  量:数値;

  コンストラクタ() { 
    設定間隔(()=>{
      this.stockCode = 'Apple'
    },3000)
  }

  ngOnInit() {
  }
}

エクスポートクラス PriceQuoteComponent は OnInit を実装します {

  // 株価サービスに接続せず、乱数ジェネレータを使用して株価の変化をシミュレートし、株価コードと最新価格を表示します。stockCode:string="IBM";
  価格:数;

  コンストラクタ() {
    設定間隔(()=>{
      priceQuote:PriceQuote = new PriceQuote(this.stockCode,100*Math.random()); とします。
      this.price=priceQuote.lastPrice;
    },1000)
  }

  ngOnInit() {
  }

}


//株価情報をカプセル化するために引用オブジェクトをカプセル化します //クラスまたはインターフェースを使用して特定のデータ構造を明確に定義することは良い習慣です export class PriceQuote {
  コンストラクター(public stockCode: string, //株価コード public lastPrice: number //最新価格) {
  }
}

'@angular/core' から Component、OnInit、EventEmitter、Output をインポートします。

@成分（{
  セレクター: 'app-price-quote',
  テンプレート URL: './price-quote.component.html',
  スタイル URL: ['./price-quote.component.css']
})
エクスポートクラス PriceQuoteComponent は OnInit を実装します {

  // 株価サービスに接続せず、乱数ジェネレータを使用して株価の変化をシミュレートし、株価コードと最新価格を表示します。stockCode: string = "IBM";
  価格: 数;

  @Output() // 出力イベントはOutputとして記述する必要があります
  //EventEmitter には汎用の lastPrice が必要です: EventEmitter<PriceQuote> = new EventEmitter();
  //

  コンストラクタ() {
    間隔を設定する(() => {
      priceQuote を作成します: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
      this.price = priceQuote.lastPrice;
      //lastPrice を使用して値を出力します this.lastPrice.emit(priceQuote);
    }, 1000)
  }

  ngOnInit() {
  }

}
//株価情報をカプセル化するために引用オブジェクトをカプセル化します //クラスまたはインターフェースを使用して特定のデータ構造を明確に定義することは良い習慣です export class PriceQuote {
  コンストラクター(public stockCode: string, //株価コード public lastPrice: number //最新価格) {
  }
}

クラスAppComponentをエクスポートします。
  在庫 = "";
  価格見積: 価格見積 = 新しい価格見積("", 0);

  //イベントの種類は、子コンポーネントが発行するときに発行されるデータのタイプです //親コンポーネントはpriceQuoteHandler(event:PriceQuote){を取得できます
    this.priceQuote=イベント;
  }
}

<!-- デフォルトでは、イベント名は出力属性の名前になります -->
<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>

<div>
  これは引用コンポーネントの外側にあります<br/>
  株式コードは{{priceQuote.stockCode}}です。
  株価は{{priceQuote.lastPrice | number:"2.0-2"}}です
</div>

@Output("priceChange") // イベントを起動するには出力が必要です
  //EventEmitter には汎用の lastPrice が必要です: EventEmitter<PriceQuote> = new EventEmitter();

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