码迷,mamicode.com
首页 > 其他好文 > 详细

Anglar 组件间的通信

时间:2017-07-30 17:07:49      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:pre   exp   image   demo1   ice   创建   输入   报价   中间人   

一、输入属性(父组件与子组件通信)

1. 创建工程

ng new demo1

2.创建order组件

ng g component corder

3. 在order组件里定义输入属性

技术分享

order组件的html

技术分享

 

4. 父组件

app.component.ts中定义stock

技术分享

 app.component.html, 采用双向绑定

技术分享

 

 效果图

技术分享

最终父组件IBM的值,通过输入属性,把值传递给了子组件

 

二、输出属性(子组件与父组件通信)

1. ng g component priceQutoe 创建报价组件

2. 定义报价组件控制器

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(‘priceChange‘)
  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) {
  }
}

 3. 定义报价组件html

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

  

4. 父组件控制器

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 = ‘‘;
  title = ‘app‘;

  priceQuote: PriceQuote = new PriceQuote(‘‘, 0);

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

  

5. 父组件html

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

 

6.效果图

技术分享

 三、中间人模式

当另个组件不是父子组件关系时,需要两个共同的父组件,这个父组件就是中间人模式

中间人模式同时使用了输入属性和输出属性

1. 报价组件定义

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(‘priceChange‘)
  //lastPrice: EventEmitter<PriceQuote> = new EventEmitter()

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

  constructor() {
    setInterval(() => {
      const 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) {
  }
}

  

2. 报价组件html

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

  

3.订单组件控制器

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()
  priceQutoe: PriceQuote;

  constructor() { }

  ngOnInit() {
  }

}

  

4. 订单组件html

<div>
  我下单组件
</div>
<div>
  买100手{{priceQutoe.stockCode}}股票,买入价为{{priceQutoe.lastPrice | number:‘2.2-2‘}}
</div>

  

5. 父组件的控制器

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);

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

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

  

6.父组件的html

<div>
  我是父组件
</div>
<app-price-quote (buy)="buyHandler($event)"></app-price-quote>
<app-order [priceQutoe]="priceQuote"></app-order>

  

7.效果图

技术分享

当点击“立即购买”时,显示当时的显示价格。

 

Anglar 组件间的通信

标签:pre   exp   image   demo1   ice   创建   输入   报价   中间人   

原文地址:http://www.cnblogs.com/linlf03/p/7257929.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!