angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下
rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/open1462525661610.html
以下是服务代码
import { Injectable } from '@angular/core';
import {Subject}from"rxjs/Subject";
@Injectable()
export class CService {
private outputTitle = new Subject();
//订阅
//声明变量 订阅Observer
output$ = this.outputTitle.asObservable(); //推送 调用next方法 Subject会向所有已经在其上注册的Observer多路推送 theValue UpData(message:any) {
this.outputTitle.next(message);
}
}
以下是子组件中的代码 节选
import { Component, OnInit ,Input,
import {CService}from"../shared/corresponded.service";//引入服务 单例模式 @Component({
//这里一定不要注册服务提供商 也就是不要在里面声明
providers: []//不需要提供CService服务
})
export class HomePostsComponent implements OnInit { constructor(
//与父组件的cs服务实例相同 是同一个实例
public _CService:CService) {
} //自己业务需要在初始化的时候调用 所以就放在这里了 \
ngOnInit() {
//发送消息
//updata调用next方法 推送数据
this._CService.UpData({title:"铃铛宠物",ico:""});
} }
以下是父组件代码 节选
import { Component,OnInit,AfterViewChecked,AfterViewInit} from '@angular/core';
//引入服务
import {CService}from"./shared/corresponded.service";
@Component({
//服务供应商 只在父组件使用 子组件不需要
providers: [CService]
})
export class AppComponent implements OnInit,AfterViewChecked,AfterViewInit {
//此处cs 实例和子组件的实例是一样的 都是同一个实例
constructor(private CS:CService) { } //在ngAfterViewChecked每次做完组件视图和子视图的变更检测之后调用。 会执行多次
//ngAfterViewInit初始化完组件视图及其子视图之后调用。只调用一次
//订阅组件信息 只写了接收 没写发送 道理是一样的
ngAfterViewInit() {
let that = this;
console.log("ngAfterViewInit");
this.CS.output$.subscribe((value:any)=> {
console.log(value);
that.title = value.title;
that.ico = value.ico;
})
} }
整个通信流程 核心就是单例 只有一个服务的实例 目前就这么多了 不明白的留言交流吧
angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2的更多相关文章
- angular组件之间的通讯
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
- Angular 发布订阅模式实现不同组件之间通讯
在我们项目中要实现不同组件之间通讯,Angular的@Input和@Output只能实现有父子组件的限制,如果是复杂跨组件实现不同组件可以通过共享变量的方式实现,比如这个博客的思路:https://w ...
- Android--Otto事件总线 -- 组件之间通讯框架使用 --模式解析
前言:Otto事件总线 -- 组件之间通讯框架 对于之前的情况activity之间或者fragment之间等跳转传值一般都是用bundle.intent等,从activityA --- activit ...
- Angular组件之间通讯
组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...
- Angular10 组件之间的通讯
1 父组件和子组件之间的通讯 2 利用中间组件实现两个组件之间的通讯 3 利用服务实现两个组件之间的通讯 2017年8月26日20:09:13 待更新... 1 组件之间的关系图 1.1 父子关系 1 ...
- 组件之间的通讯:vuex状态管理,state,getters,mutations,actons的简单使用(一)
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...
- vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 分布式服务通讯框架XXL-RPC
<分布式服务通讯框架XXL-RPC> 一.简介 1.1 概述 XXL-RPC 是一个分布式服务通讯框架,提供稳定高性能的RPC远程服务调用功能.现已开放源代码,开箱即用. 1.2 特 ...
随机推荐
- 向Git证明自己的身份,Git别名配置
一.向Git证明自己的身份 在安装完Git后,第一步就是向Git说明自己的身份,通过如下两个命令证明: git config --global user.name "myusername&q ...
- 28个Unix/Linux的命令行神器
下面是Kristóf Kovács收集的28个Unix/Linux下的28个命令行下的工具(原文链接),有一些是大家熟悉的,有一些是非常有用的,有一些是不为人知的.这些工具都非常不错,希望每个人都知道 ...
- 关于ASSERT(断言)的作用
程序一般分为Debug 版本和Release 版本,Debug 版本用于内部调试,Release 版本发行给用户使用.断言assert 是仅在Debug 版本起作用的宏,它用于检查“不应该”发生的情况 ...
- hdoj 1698 Just a Hook【线段树区间修改】
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- Gof-23种设计模式名称列表
工欲善其事,必先利其器. 在真正使用设计模式之前,必须知道各个设计模式对应的场景.设计模式是针对某种固定的场景下产生的固定解决方案.只有明确的场景,才会有明确的设计方式和方法. 设计模式全集: Abs ...
- Git 版本控制工具(学习笔记)
GIT(分布式) 一.Git 初始版本控制工具 1. 安装Git Ubuntu系统下,打开shell界面,输入: sudo apt-get install git-core 之后回车输入密码,即可完 ...
- SQL 中having 和where的区别分析
在select语句中可以使用groupby子句将行划分成较小的组,然后,使用聚组函数返回每一个组的汇总信息,另外,可以使用having子句限制返回的结果集 在select语句中可以使用groupby子 ...
- 理解position 绝对定位和相对定位
一.position的三种取值 1.取值 Position : static / absolute / fixed / relative static:静态 absolute:绝对定位 ...
- sed和awk最佳入门教程
文档<sed和awk最佳入门教程>——摘自<实战linux shell编程与服务器管理>,简单易懂,适合初学者. 下载地址:http://download.csdn.net/d ...
- apache kafka技术分享系列(目录索引)--转载
原文地址:http://blog.csdn.net/lizhitao/article/details/39499283 kafka开发与管理: 1)apache kafka消息服务 2)kafak安装 ...