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. 定义报价组件控制器
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.效果图
当点击“立即购买”时,显示当时的显示价格。
Angular 4 组件间的通信的更多相关文章
- angular组件间的通信(父子、不同组件的数据、方法的传递和调用)
angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- ZeroMQ(java)之I/O线程的实现与组件间的通信
算是开始读ZeroMQ(java)的代码实现了吧,现在有了一个大体的了解,看起来实现是比较的干净的,抽象什么的不算复杂... 这里先来看看它的I/O线程的实现吧,顺带看看是如何实现组件的通信的.... ...
- vuejs单一事件管理组件间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
- (尚033)Vue_案例_slot(组件间的通信4:slot)
1.组件间的通信4:slot(slot:插槽,就是一个占位) slot用于标签反复使用很多次 1.1理解 此方式用于父组件向子组件传递标签数据, 其他为数据通信 外面组件向里面组件传递标签进去,直接拿 ...
- 后端学 Angular 2 —— 组件间通信
1. 父组件向子组件传递信息 使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量 例子: import { Component, OnInit, Input } fro ...
- vue组件间的通信
组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...
随机推荐
- 简话Angular 04 Angular过滤器详解
一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...
- Chrome nacl开启
Chrome nacl开启
- [置顶]使用scrapy_redis,自动实时增量更新东方头条网全站新闻
存储使用mysql,增量更新东方头条全站新闻的标题 新闻简介 发布时间 新闻的每一页的内容 以及新闻内的所有图片.项目文件结构. 这是run.py的内容 1 #coding=utf-8 2 from ...
- 【LeetCode 235_二叉搜索树】Lowest Common Ancestor of a Binary Search Tree
解法一:递归 TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, TreeNode* q) { if (root == NULL | ...
- hibernate缓存清除(转)
文章有点杂,这不是原文,谢谢贡献者 http://www.360doc.com/content/16/0413/16/32415095_550307388.shtml 一.hibernate一级缓存( ...
- 第一次做Java程序注意事项
public class myapp{ public static void main(String[] args){ System.out.println("Hallo Java!&quo ...
- Jmeter BeanShell 从数据库中获取数据并创建一个requesBody
一.前言 在测试接口的时候常常会使用到数据库中的数据,当要使用大量的数据时,仅仅使用数据库查询是不够的.还需要使用自动化让操作更简便. 下面以一个简单的例子阐述一下如何使用beanShell让代码更简 ...
- webStrom 美化
webStrom 激活: 注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.iteblog.com/ke ...
- cmd 环境变量设置的简单方法
1.查看当前所有可用的环境变量:输入 set 即可查看. 2.查看某个环境变量:输入 “set 变量名”即可,比如想查看temp变量的值,即输入 set temp 3.修改环境变量 :输入 “set ...
- HDU 3364
http://acm.hdu.edu.cn/showproblem.php?pid=3364 经典高斯消元解开关问题 m个开关控制n个灯,开始灯全灭,问到达目标状态有几种方法(每个开关至多一次操作,不 ...