angular 中间人模式

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenyishi/p/8932318.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Angular框架实现的简单应用程序，展示了如何通过组件之间的通信来更新UI。具体包括了如何定义和使用自定义事件发射器(EventEmitter)，以及如何在父组件中监听子组件发出的事件。

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>

转载于:https://www.cnblogs.com/chenyishi/p/8932318.html