• import { Subject } from 'rxjs/Subject';


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

  • 相关阅读:
    她又在这个星期联系我了 20110422
    用心去做 20110307
    2011年随笔记
    让我有勇气坚持下去 20110427
    2011年随笔记 5月30号以后的日志薄
    因为迷失,所以 201103015
    迷失只是暂时 20110313
    我们做一对好哥们吧 20101228
    3.20号,她恢复了联系 20110320
    FW: Deploy reporting services web parts (RSWebParts) to SharePoint 2010
  • 原文地址:https://www.cnblogs.com/jayruan/p/8083447.html
Copyright © 2020-2023  润新知