Angular4-在线竞拍应用-组件间通信

ゝ一纸荒年。 2022-06-06 05:57 193阅读 0赞

angular应用就是一个组件树  
要创建松耦合的组件

# 组件通信的例子 #

新生成一个项目ng new demo2

或者通过webstorm，File，New，Project..，Angular CLI，然后把项目名改成demo2

因为要用双向绑定，在app.module.ts中添加

import{FormsModule} from '@angular/forms'
    
    imports: [
        BrowserModule,
        FormsModule
      ],

## 从父组件传递数据到子组件 ##

组件间通信是单向的，从父组件传递到子组件。

新建一个组件ng g component order

修改order.component.ts

import { Component, OnInit ,Input} from '@angular/core';
    
    @Component({
      selector: 'app-order',
      templateUrl: './order.component.html',
      styleUrls: ['./order.component.css']
    })
    export class OrderComponent implements OnInit { 
    
      @Input()
      stockCode:string;
    
      @Input()
      amount:number;
    
      constructor() { }
    
      ngOnInit() {
      }
    
    }

修改order.component.html

<p>
      我是子组件
    </p>
    <p>
      买{
       {amount}}手{
       {stockCode}}股票
    </p>

修改其父组件app，修改app.component.ts

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent { 
    
      stock="";
    
      title = 'app';
    }

修改app.component.html

<div>
      我是父组件
    </div>
    <div>
      <input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
      <app-order [stockCode]="stock" [amount]="100" ></app-order>
    </div>

**组件间通信是单向的，只能从父组件到子组件**

启动项目。

## 子组件的数据传输到父组件 ##

新建一个组件ng g component priceQuote

修改price-quote.component.ts

import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-price-quote',
      templateUrl: './price-quote.component.html',
      styleUrls: ['./price-quote.component.css']
    })
    export class PriceQuoteComponent implements OnInit { 
    
      stockCode:string="IBM";
    
      price:number;
    
      constructor() {
        setInterval(()=>{
          let priceQuote:PriceQuote=new PriceQuote(this.stockCode,100*Math.random())
          this.price=priceQuote.lastPrice;
        },1000)
      }
    
      ngOnInit() {
      }
    
    }
    
    export class PriceQuote{ 
      constructor(public stockCode:string,
                  public lastPrice:number){
    
      }
    }

修改price-quote.component.html

<div>
      这里是报价组件
    </div>
    <div>
      股票代码是{
       {stockCode}},股票价格是{
       {price|number:'2.2-2'}}
    </div>

修改app.component.html

启动项目

现在我要**把子组件中的数据传到父组件**

修改price-quote.component.ts

import {Component, OnInit, EventEmitter, 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: string = "IBM";
    
      price: number;
      //EventEmitter既可以当被观察者也可以当观察者
      /** * 泛型规定的是向外发射的是什么类型的 * @type {EventEmitter<any>} */
      @Output()
      lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
    
      constructor() {
        setInterval(() => {
          let priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random())
          this.price = priceQuote.lastPrice;
          this.lastPrice.emit(priceQuote);//用emit向外发射
        }, 1000)
      }
    
      ngOnInit() {
      }
    
    }
    
    export class PriceQuote { 
      constructor(public stockCode: string,
                  public lastPrice: number) {
    
      }
    }

修改app.component.ts

import { Component } from '@angular/core';
    import {PriceQuote} from "./price-quote/price-quote.component";
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent { 
    
      stock="";
    
      priceQuote:PriceQuote=new PriceQuote("",0);
    
      priceQuoteHandler(event:PriceQuote){
       //接收子组件传递过来的数据
        this.priceQuote=event;
      }
    }

修改app.component.html

<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>
    
    <div>
      这是在报价组件外部，
    <div>
    
    </div>
      股票代码是{
       {priceQuote.stockCode}},
      股票价格是{
       {priceQuote.lastPrice|number:'2.2-2'}}
    </div>

启动项目

其中price-quote.component.ts

/** EventEmitter既可以当观察者也可以当被观察者 其中泛型规定的是向外发射的是什么类型的 */
    @Output()
    lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
    
    this.lastPrice.emit(priceQuote);//用emit方法向外发射

其中在app.component.html中

<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>

默认情况下里边的lastPrice要和price-quote.component.ts中的lastPrice一样。

如果想不一样的话可以

@Output('priceChange')
    lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
    
    
    <app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>

现在这种情况只能由其父组件来绑定事件并处理。如果两个组件不存在父子关系，怎么以一种松耦合的方式传递数据呢？

## 中间人模式 ##

**中间人组件负责从一个组件接受数据并传递给另一个组件。**

修改price-quote.component.html

<div>
      这里是报价组件
    </div>
    <div>
      股票代码是{
       {stockCode}},股票价格是{
       {price|number:'2.2-2'}}
    </div>
    
    <div>
      <input type="button" value="立即购买" (click)="buyStock($event)">
    </div>

在price-quote.component.ts中添加

@Output()
      buy:EventEmitter<PriceQuote>=new EventEmitter();
    
      buyStock(event){
        this.buy.emit(new PriceQuote(this.stockCode,this.price));
      }

修改app.component.html

<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;
    
      constructor() { }
    
      ngOnInit() {
      }
    
    }

修改order.component.html

<p>
      我是下单组件
    </p>
    <p>
      买100手{
       {priceQuote.stockCode}}股票,买入价格是{
       {priceQuote.lastPrice | number:'2.2-2'}}
    </p>

**priceQuote组件通过app组件这个中间人把数据传给order组件。**

app是priceQuote和order这两个兄弟组件的父组件。

**如果没有父组件这种关系，可以定义一个服务来做实现中间人的功能。**