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

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

  name = 'IBM';
  count: number;
  @Output()
  price: EventEmitter<Product> = new EventEmitter();

  constructor() { }

  ngOnInit() {
    setInterval(() => {
      const product = new Product(this.name, 100 * Math.random());
      this.count = product.price;
      this.price.emit(product);
    }, 1000);
  }

}

export class Product {
  constructor(public name: string, public price: number) { }
}
<p>
  买{{count | number:'2.1-4'}}手{{name}}产品
</p>
import { Component } from '@angular/core';
import { Product } from './order-change/order-change.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  orderName: string;
  count: number;

  price: Product = new Product('', 0);

  priceHandler(event: Product) {
    this.price = event;
  }
}
<app-order-change (price)="priceHandler($event)"></app-order-change>
{{price.name}}
{{price.price | number : '2.1-4'}}

 

posted on 2018-04-24 17:32  chester·chen  阅读(118)  评论(0编辑  收藏  举报