angular 输出属性

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'}}
原文地址:https://www.cnblogs.com/chenyishi/p/8932045.html