(十三)、Angular4.0 中间人模式(组件间通讯)

忘是亡心i 2022-05-28 08:55 158阅读 0赞

**一、在第十二篇博客的demo3项目上改造**

**二、新建order组件**

ng g component order

**三、思路：**

*  在price-quote组件中每秒刷新股价数据，点击一个button按钮后，把当前股价发送出去(emit)，price-quote的父组件app接收数据，并把数据赋值给自己的属性priceQuote（一个PriceQuote对象），order接收app的输入属性priceQuote，把该属性保存到自己的priceQuote属性中，在order的html中展示出来。

**四、在price-quote.component.html中添加'购买股票'的按钮**

**五、在price-quote.component.ts中定义buyStock函数，发射数据**

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
    
    @Component({
      selector: 'app-price-quote',
      templateUrl: './price-quote.component.html',
      styleUrls: ['./price-quote.component.css']
    })
    export class PriceQuoteComponent implements OnInit {
    
      stockCode = 'IBM';
    
      price: number;
    
      // @Output()
      // priceChange: EventEmitter<PriceQuote> = new EventEmitter<PriceQuote>();
    
      @Output()
      buy: EventEmitter<PriceQuote> = new EventEmitter<PriceQuote>();
    
      constructor() {
        // 每秒用随机数刷新股价
        setInterval(() => {
          const priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
          this.price = priceQuote.lastPrice;
    
          // // 把每秒产生的新数据发送到外部
          // this.priceChange.emit(priceQuote);
        }, 1000);
      }
    
      buyStock() {
        this.buy.emit(new PriceQuote(this.stockCode, this.price));
      }
    
      ngOnInit() {
      }
    
    }
    
    export class PriceQuote {
      constructor(public stockCode: string,
                  public lastPrice: number) {
    
      }
    }

**六、在app.component.html中通过buyHandler函数接收数据，并把数据输入到order组件中**

<app-price-quote (buy)="buyHandler($event)"></app-price-quote>
    <app-order [priceQuote]="priceQuote"></app-order>

**七、app.component.ts**

export class AppComponent {
      // stock = '';
      priceQuote: PriceQuote = new PriceQuote('', 0);
    
      buyHandler(event: PriceQuote) {
        this.priceQuote = event;
      }
    }

**八、order.component.ts中接收输入属性**

export class OrderComponent implements OnInit {
    
      @Input()
      priceQuote: PriceQuote;
    
      ngOnInit() {
      }
    
    }

**九、order.component.html展示点击按钮时获取的数据**

<div>
      买入{
       {priceQuote.stockCode}}股票，买入价格是{
       {priceQuote.lastPrice | number:'2.2-2'}}
    </div>

**十、启动项目，访问localhost:4200**