shared-service.ts

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SharedService {
// Observable string sources
private emitChangeSource = new Subject<any>();
// Observable string streams
changeEmitted$ = this.emitChangeSource.asObservable();
// Service message commands
emitChange(change: any) {
this.emitChangeSource.next(change);
}
}

Now inject the instance of the above service in the constructor of both the parent and child component.

The child component will be emitting a change every time the onClick() method is called

child.component.ts

import { Component} from '@angular/core';
@Component({
templateUrl: 'child.html',
styleUrls: ['child.scss']
})
export class ChildComponent {
constructor(
private _sharedService: SharedService
) { } onClick(){
this._sharedService.emitChange('Data from child'); }
}

The parent component shall receive that change. To do so,capture the subscription inside the parent's constructor.

parent.component.ts

import { Component} from '@angular/core';
@Component({
templateUrl: 'parent.html',
styleUrls: ['parent.scss']
})
export class ParentComponent {
constructor(
private _sharedService: SharedService
) {
_sharedService.changeEmitted$.subscribe(
text => {
console.log(text);
});
} }

Hope this helps :)

import { Subject } from 'rxjs/Subject';的更多相关文章

  1. RxJS - Subject(转)

    Observer Pattern 观察者模式定义 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态 ...

  2. [RxJS] Subject basic

    A Subject is a type that implements both Observer and Observable types. As an Observer, it can subsc ...

  3. [RxJS] Subject: an Observable and Observer hybrid

    This lesson teaches you how a Subject is simply a hybrid of Observable and Observer which can act as ...

  4. [RxJS] Subject asObservable() method

    You can create your own state store, not using any state management libraray. You might have seen th ...

  5. rxjs——subject和Observable的区别

    原创文章,转载请注明出处 理解 observable的每个订阅者之间,是独立的,完整的享受observable流动下来的数据的. subject的订阅者之间,是共享一个留下来的数据的 举例 这里的cl ...

  6. RxJS之Subject主题 ( Angular环境 )

    一 Subject主题 Subject是Observable的子类.- Subject是多播的,允许将值多播给多个观察者.普通的 Observable 是单播的. 在 Subject 的内部,subs ...

  7. angular2 学习笔记 ( rxjs 流 )

    RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅,  ...

  8. [Angular 2] Managing State in RxJS with StartWith and Scan

    The scan operator in RxJS is the main key to managing values and states in your stream. Scan behaves ...

  9. RxJS速成 (下)

    上一部分: http://www.cnblogs.com/cgzl/p/8641738.html Subject Subject比较特殊, 它即是Observable又是Observer. 作为Obs ...

随机推荐

  1. python 实现简单的KNN算法

    from numpy import * import operator def createDataSet(): group = array([[3,104],[2,100],[1,81],[101, ...

  2. 移动应用安全开发指南(Android)--数据存储

    1.数据存储 概述 移动应用经常需要在某些场景下(比如用户登录)处理和用户或业务相关的敏感数据,有时候为满足某些业务需求,需要把这些敏感数据存储在本地,如果不对这些数据进行适当处理,就有可能存在敏感信 ...

  3. 几本推荐的Java书

    一.<深入理解Java虚拟机:JVM高级特性与最佳实践> 如果你不满足于做一个只会写if…else…的Java程序员,而是希望更进一步,我随便举几个例子吧: 1.了解Java代码的底层运行 ...

  4. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用23

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其 ...

  5. Google Breakpad 完全解析(二) —— Windows前台实现篇

    原创文章,转载请标明出处:Soul Apogee (http://bigasp.com),谢谢. 好,看完了如何使用breakpad,我们现在看看breakpad在Windows下到底是如何实现的呢? ...

  6. ones工作流预设

    系统首选项->工作流->新建保存后在工作流设计中将内容复制到编辑器中. 出库流程 支持分批次出库,支持外部单据转化为出库单并在出库结束后通知原始单据 流程图: 模块:storage.sto ...

  7. Walle代码发布系统

    Walle 一个web部署系统工具,配置简单.功能完善.界面流畅.开箱即用!支持git.svn版本管理,支持各种web代码发布,PHP,Python,JAVA等代码的发布.回滚,可以通过web来一键完 ...

  8. nginx最大并发连接数的思考:worker_processes、worker_connections、worker_rlimit_nofile

    参考nginx官网:http://nginx.org/en/docs/ngx_core_module.html#worker_connections 从用户的角度,http 1.1协议下,由于浏览器默 ...

  9. "com.android.ide.s.ProcessException:Process 'cand 'C:\Program Files\Java\jdk1.8.0_60\bin\java.exe'' finished with non-zero exit value 2"

    使用Android Studio 出现该问题: "com.android.ide.common.process.ProcessException: org.gradle.process.in ...

  10. C# http Post 方法

    摘自: http://geekswithblogs.net/rakker/archive/2006/04/21/76044.aspx Http Post in C# Searched out on t ...