Angular 4 组件间的通信

一、输入属性（父组件与子组件通信）

1. 创建工程

ng new demo1

2.创建order组件

ng g component order

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

order组件的html

 

4. 父组件

app.component.ts中定义stock

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

 

 效果图

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

 

二、输出属性（子组件与父组件通信）

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

2. 定义报价组件控制器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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

1 2 3 4 5 6

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

　　

4. 父组件控制器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

1 2 3 4 5 6 7 8

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

 

6.效果图

 三、中间人模式

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

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

1. 报价组件定义

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

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

1 2 3 4 5 6 7 8 9

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

　　

3.订单组件控制器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

1 2 3 4 5 6

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

　　

5. 父组件的控制器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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

1 2 3 4 5

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

　　

7.效果图

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

本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/7257929.html，如需转载请自行联系原作者