zoukankan      html  css  js  c++  java
  • shared-service.ts

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

  • 相关阅读:
    shell
    RANDOM随机数
    docker网络管理
    Oracle-28001密码过期问题及28000账户被锁解决
    Oracle数据泵导入导出(expdb/impdb)
    mysql多实例部署
    sed命令基本使用
    MySQL5.7.x二进制安装
    每日日报
    每日日报
  • 原文地址:https://www.cnblogs.com/jayruan/p/7595073.html
Copyright © 2011-2022 走看看