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 :)

shared-service.ts的更多相关文章

  1. angular6 http.service.ts

    import { Injectable, isDevMode } from '@angular/core'; import { HttpClient, HttpParams, HttpHeaders ...

  2. angular2+ 组件间通信

    angular2+ 不同于react的redux,vue的vuex,angular2+其实可实现数据状态管理的方法很多,以下方案一般也足够支撑普通业务: 父子组件通信 1.1 父组件向子组件传递信息( ...

  3. Angular2 Service实践——实现简单音乐播放服务

    引言: 如果说组件系统(Component)是ng2应用的躯体,那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了.组件间通信的其中一种优等选择就是使用服务,在ng1里就有 ...

  4. Angular2 Service实践

    引言: 如果说组件系统(Component)是ng2应用的躯体,那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了.组件间通信的其中一种优等选择就是使用服务,在ng1里就有 ...

  5. Angular 非父子组件间的service数据通信

    完成思路:以service.ts(主题subject---订阅sbuscribe模式)为数据中转中间件,通过sku.ts的数据更改监测机制,同步更改service.ts中的数据,同时buy.ts组件实 ...

  6. Ionic3 新增 Service

    service是单例模式的 新增Service类 search.service.ts import {Injectable} from '@angular/core'; @Injectable() e ...

  7. 一些angular/js/ts的坑和吐槽

    ------20190318 ------------- 回头看,很多槽点已经随着升级改掉了   绑定string字面值到子组件@Input <app-overlay-static [name] ...

  8. angularcli 第七篇(service 服务)

    在组件中定义的信息是固定的,假设另外一个组件也需要用到这些信息,这时候就用到服务,实现 共享数据 和 方法 组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据. 它们应该聚焦于展示数据,而把 ...

  9. Angular:使用service进行http请求的简单封装

    ①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入HttpClientModule模块 ③在app.module.ts 中引入创建 ...

  10. asp.net c# 网上搜集面试题目大全(附答案)

    1.String str=new String("a")和String str = "a"有什么区别? String str = "a"; ...

随机推荐

  1. CF 256C Furlo and Rublo and Game【博弈论,SG函数】

    暴力的求SG函数会超时,正解是先处理出10^6以内的SG值,对于更大的,开根号之后计算出. 小数据观察可以发现sg函数值成段出现,而且增长速度很快,因此可以计算出来每一段的范围,只需打表即可. Nim ...

  2. 给ul下的li加click时间

    $('.province ul li').click(function() {//方法 });

  3. Android内存优化3 了解java GC 垃圾回收机制1

    开篇废话 如果我们想要进行内存优化的工作,还是需要了解一下,但这一块的知识属于纯理论的,有可能看起来会有点枯燥,我尽量把这一篇的内容按照一定的逻辑来走一遍.首先,我们为什么要学习垃圾回收的机制,我大概 ...

  4. opencv Mat 像素操作

    1 cv::Mat cv::Mat是一个n维矩阵类,声明在<opencv2/core/core.hpp>中.   class CV_EXPORTS Mat { public: //a lo ...

  5. 三.rocketmq-console

    ⦁    rocketmq-console来源于https://github.com/rocketmq/rocketmq-console 1.配置IP 2.启动运行:出现此信息则表示成功  访问:in ...

  6. JavaWeb对RSA的使用

    由于公司的网站页面的表单提交是明文的post,虽说是https的页面,但还是有点隐患(https会不会被黑?反正明文逼格是差了点你得承认啊),所以上头吩咐我弄个RSA加密,客户端JS加密,然后服务器J ...

  7. jersey rest webservice

    参考官网:https://jersey.github.io/documentation/latest/getting-started.html#new-webapp 创建一个 JavaEE Web A ...

  8. thinkphp5.0 中使用第三方无命名空间的类库

    ThinkPHP5建议所有的扩展类库都使用命名空间定义,如果你的类库没有使用命名空间,则不支持自动加载,必须使用Loader::import方法先导入文件后才能使用. 首先要在文件头部使用loader ...

  9. Codeforces 112A-Petya and Strings(实现)

    A. Petya and Strings time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  10. [Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer

    With a well defined demarcation point between Redux and our State ADT based model, hooking up to a R ...