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. Linux下KVM的图形界面管理工具(WebVirtMgr)(Web版)

    WebVirtMgr面板 截图 介绍 WebVirtMgr是一个基于libvirt的Web界面,用于管理虚拟机.它允许您创建和配置新域,并调整域的资源分配.VNC查看器为来宾域提供完整的图形控制台.K ...

  2. GUN C/C++ __attribute__ 用法 转

     http://blog.csdn.net/mydo/article/details/3738336     GNUC的一大特色(却不被初学者所知)就是__attribute__机制.__attrib ...

  3. 【shiro】关于shiro匹配URL的小用法

    今天涉及到这个地方 1.登录请求需要带着username和password一起过去,这样的话发出的请求就是:http://localhost:8080/wxSecond/welcome/login.h ...

  4. Sqlserver__数据表排序记录和界面显示排序记录不一致的问题

    背景:     数据表中有编号为1-20的20条记录,有一个排序字段OrderIndex, 其中1/3为0,1/3为1,1/3为2   现象:     每次在sqlserver执行OrderIndex ...

  5. Nokitjs 系列-01 - HelloWorld

    一.前言 本篇文章需要读者有一点 Node.js 基础的了解,并且已经安装了 Node.js (node.npm),但并不需要有 Nokit 的知识,本文将简单介绍 Nokitjs 的安装使用,并编写 ...

  6. postgres--wal

    WAL机制 持久性指事务提交后对系统的影响必须是永久的,即使系统意外宕机,也必须确保事务修改的数据已真正永久写入到永久存储中. 最简单的实现方法,是在事务提交后立即将修改的数据写到磁盘.但磁盘和内存之 ...

  7. python2和python3的编码问题

    python2中有两种类型 str字符串和unicode字符串 python3则改成了 bytes和str字符串 在python2中‘xxx’和b‘xxx’都是str字符串,u‘xxx’是unicod ...

  8. xml文件中配置JDBC源遇到问题 : The reference to entity "characterEncoding" must end with the ';' delimiter

    数据源配置时加上编码转换格式后出问题了: The reference to entity"characterEncoding" must end with the ';' deli ...

  9. 开发 nodejs REST 个人感想

    本来想拿 nodejs 做个 ip 查询小应用的,做的时候想着把基础弄好再做应用,没想到做着做着就变成 spring 了 可能太多数人觉得不知道怎么用,以后我会写详细点使用教程 个人感觉自己做出来的东 ...

  10. POJ 1844 Sum【简单数学】

    链接: http://poj.org/problem?id=1844 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=29256#probl ...