Angular2從服務中調用組件

Question

我試圖從Service調用Component的方法。 正確的方法是什么？ 我嘗試使用rxjs Subject創建一個Observable，但是無法啟動它。

import {Subject} from 'rxjs/Subject';
    export class MyService {
        callComponent = function(value) {

            let invokeEvent = new Subject();

            invokeEvent.next({some:value})
        }
    }

在我的組件中

export class MyComponent {
    constructor(private _myService: MyService) {
             this._myService.invokeEvent.subscribe(value => console.log(value))
           }

}

Answer 1

這是the客： http ://plnkr.co/edit/WKSurRJMXo5JZOPrwSP5?p=preview

這樣更改您的服務

import {Subject} from 'rxjs/Subject';

@Injectable()
export class MyService {

    invokeEvent:Subject<any> = new Subject();


    callComponent(value) {
        this.invokeEvent.next({some:value})
    }
}

不要忘記在您的組件中提供它

@Component({
  selector: 'my-component',
  template: `
  `,
  providers: [MyService]
})
export class MyComponent {
       constructor(private _myService: MyService) {
         this._myService.invokeEvent.subscribe(value => console.log(value));
         setTimeout(()=>{
            this._myService.callComponent(1);
         },1000);
       }
}

另外，如果您希望此服務成為全局共享服務，請執行以下操作： 將其放入（提供）您的bootstrap（舊）或ngModule中，以便它將在整個應用程序中共享相同的單例實例。

Answer 2

您可以在服務中定義Observable ，以便可以從組件訂閱該Observable。

//服務

import { Injectable, Inject } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class MyService {
  private notify = new Subject<any>();
  /**
   * Observable string streams
   */
  notifyObservable$ = this.notify.asObservable();

  constructor(){}

  public notifyOther(data: any) {
    if (data) {
      this.notify.next(data);
    }
  }

  callComponent(value){
    this.notify.next({some:value});
  }
}

//零件

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { MyService } from './my.service';
export class MyComponent {
  private subscription: Subscription;
  constructor( private _myService: MyService ){
  }

  ngOnInit() {
    this.subscription = this._myService.notifyObservable$.subscribe((value) => {
        console.log(value);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Answer 3

import {Subject} from 'rxjs/Subject';

export class MyService {

        private invokeEvent = new Subject(); 

        invokeEvent$ = this.missionConfirmedSource.asObservable();   //<<< this is important to declare invokeEvent with asObservable(); 

        callComponent = function(value) {
            invokeEvent.next({some:value})
        }
}


export class MyComponent {
    constructor(private _myService: MyService) {
             this._myService
                 .invokeEvent$                                        //<<< subscribe to invokeEvent$ to get the result
                 .subscribe(value => console.log(value))  
           }

}