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,如需转载请自行联系原作者

目录
相关文章
|
9月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
7月前
|
前端开发 JavaScript
前端框架与库 - Angular基础:组件、模板、服务
【7月更文挑战第16天】Angular,谷歌维护的前端框架,专注构建动态Web应用。组件是核心,包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑,依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围,能提升应用效率和质量。学习组件、模板和服务基础,打造高效Angular应用。
84 1
|
6月前
|
JavaScript 测试技术
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
47 0
|
8月前
|
JavaScript 小程序 API
技术经验分享:Angular动态创建组件之Portals
技术经验分享:Angular动态创建组件之Portals
|
9月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
9月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
JavaScript 定位技术
Angular1.x入门级自定义组件(导航条)
Angular1.x入门级自定义组件(导航条)
|
资源调度 JavaScript 容器
Angular封装WangEditor富文本组件
Angular封装WangEditor富文本组件
337 0
|
资源调度 前端开发 Java
使用Angular CDK实现一个Service弹出Toast组件
使用Angular CDK实现一个Service弹出Toast组件
161 0
|
JavaScript 前端开发 API
让Angular自定义组件支持form表单验证
让Angular自定义组件支持form表单验证
187 0