Angular data10

组件间数据传递

1、Input传递
父组件需要传递给子组件时，子组件可以用@Input()装饰器来修饰属性。

import {Component, Input, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  @Input()
  stockCode:string;

  @Input()
  amount:number;
  constructor(public routeInfo:ActivatedRoute) {
    setInterval(()=>{
      this.stockCode = 'apple';
    },3000);
  }

  ngOnInit() {
  }

}

2、Output传递
子组件向外发射属性（@Output()装饰器），父组件通过处理函数接收属性

案例：模拟股票每秒变更价格，子组件通过实例化EventEmitter，用emit方法向外发射属性

//子组件
ng g component priceQuote

price-quote.component.ts子组件代码：

import {Component, EventEmitter, 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:string = 'IBM';
  price:number;

  @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);
    },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.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>

<br>
<div>
  这是在报价子组件外部
</div>
<div>
  股票代码是{{priceQuote.stockCode}},
  股票价格是{{priceQuote.lastPrice | number:'2.2-2'}},
</div>

中间人组件

image.png

实例演示 app组件是中间人组件，price-quote是报价组件，在报价组件里面设置下单按钮来发射股票价格；在order下单组件接收股票价格；中间人组件负责报价和下单组件的数据绑定

中间人组件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);

  buyHandler(event:PriceQuote){
    this.priceQuote = event;
  }
}

//中间人组件模板  （数据绑定）
<app-price-quote  (buy)="buyHandler($event)"></app-price-quote>
<app-order [priceQuote]="priceQuote"></app-order>

price-quote.component.ts报价发射组件

import {Component, EventEmitter, 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:string = 'IBM';
  price:number;

  @Output()
  lastPrice:EventEmitter<PriceQuote> = new EventEmitter();

  @Output()
  buy:EventEmitter<PriceQuote> = new EventEmitter();

  constructor() {
    //模拟实时变动的股票价格
    setInterval(()=>{
      let priceQuote:PriceQuote = new PriceQuote(this.stockCode,100*Math.random());
      this.price = priceQuote.lastPrice;
      this.lastPrice.emit(priceQuote);
    },1000);
  }

  buyStock(event){
    this.buy.emit(new PriceQuote(this.stockCode,this.price));
  }
  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>
<input type="button" value="立即购买" (click)="buyStock($event)">

order.component.ts下单组件

import {Component, Input, OnInit} from '@angular/core';
import {PriceQuote} from "../price-quote/price-quote.component";

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  @Input()
  priceQuote:PriceQuote;

  constructor() {
  }
  ngOnInit() {
  }
}

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

源码 链接:http://pan.baidu.com/s/1i5iWiKt 密码:wf9r