输出属性

price TS

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

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

  public stockId = 'IBM';
  public price: number;

  @Output()
  kk: EventEmitter<PriceQuote> = new EventEmitter();
  constructor() {
    setInterval(() => {
      const priceQuote: PriceQuote = new PriceQuote(
        this.stockId, 100 * Math.random());
      this.price = priceQuote.lastprice;
      kk.emit(priceQuote);
    }, 1000);
  }

ngOnInit(): void {
  }
}

export class PriceQuote {
  constructor(
    public stockId: string,
    public lastprice: number
  ) {
  }
}

app TS

import { Component } from '@angular/core';
import {PriceQuote} from './pricequote/pricequote.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myng';
  stock: string;
  priceQuote: PriceQuote = new PriceQuote('', 0);

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

app HTML

<!--
<div>我是父组件</div>
<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>
-->
<app-pricequote (kk)="priceQuotehandler($event)"></app-pricequote>
<div>从子组件拿到的股票代码是{{priceQuote.stockId}}.股票的价格是{{priceQuote.lastprice | number:'00.1-2'}}</div>
<div>
  <app-product1></app-product1>
</div>
<div>
  <app-product2></app-product2>
</div>
<div>
  <app-bind></app-bind>
</div>