开发者社区> zting科技> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27734 0
angular定制组件-bootstrap(css框架)
需要的文件 bootstrap.css ui-bootstrap-tpls.js 模态框 angular定制的bootstrap的模态框,可以方便地将视图与控制器绑定。 模块的定义与模块的控制器: //定义模块时引入依赖 angular .module('myApp', [ 'ui.bootstrap' ]); //定义控制器时传入依赖 angu
1714 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
21936 0
+关注
3550
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载