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'}}