zoukankan      html  css  js  c++  java
  • 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 :)

  • 相关阅读:
    springboot p6spy 打印完整sql
    mybatis报Invalid bound statement (not found) 分析
    springboot Actuator健康检查
    springboot idea 配置热加载
    面试加笔试大全
    面试题(二)
    面试题(一)
    AJAX技术简介及入门实例
    Google的AJAX翻译程序,使你快速全球化
    ASP.NET调用javascript脚本的方法总结
  • 原文地址:https://www.cnblogs.com/jayruan/p/8083447.html
Copyright © 2011-2022 走看看