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(); @Output() priceA: 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); } sentPrice() { this.priceA.emit(new Product(this.name, this.count * 100)); } } export class Product { constructor(public name: string, public price: number) { } }
<p> 买{{count | number:'2.1-4'}}手{{name}}产品 </p> <button (click)="sentPrice()">点</button>
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 (priceA)="priceHandler($event)"></app-order-change> <app-order [test]='price'></app-order>
import { Component, OnInit, Input } from '@angular/core'; import { Product } from '../order-change/order-change.component'; @Component({ selector: 'app-order', templateUrl: './order.component.html', styleUrls: ['./order.component.css'] }) export class OrderComponent implements OnInit { @Input() orderName: string; @Input() count: number; @Input() test: Product; constructor() { } ngOnInit() { } }
<p>
买{{test.name}}手{{test.price}}产品
</p>