Вызовите компонент из сервиса

Question

У меня есть 2 компонента, с которыми нужно общаться, и служба в середине.

Услуги

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CommunicationService {

  // Observable string sources
  private onOpen = new Subject<any>();

  // Observable string streams
  onOpen = this.onOpen.asObservable();

  // Service message commands
  callComponentMethod() {
    this.onOpen.next();
  }

}

Компонент A

    import { Component } from '@angular/core';
import { CommunicationService } from './communication.service.ts'

@Component({
  selector: 'app-comp1',
  template: `
    <button type="button" (click)="callMethod()">Call method from Component1</button>
  `
})
export class Component1 {

  constructor( private communicationService: CommunicationService  ) { }

  callMethod = function () {
    this.communicationService.onOpen();
  }

}

Компонент B

import { Component } from '@angular/core';
import { CommunicationService } from './communication.service.ts'

@Component({
  selector: 'app-comp2',
  template: ``
})
export class Component2 {

  constructor( private communicationService: CommunicationService  ) {

    this.communicationService.onOpen.subscribe(
        () => {
          alert('(Component2) onOpen');
        }
      );

  }

}

после этого плункера: http://plnkr.co/edit/SmntWy0GTNdvGB5Jb3hO?p=preview метод вызывается, но я бы хотел передать параметр. Как мне это сделать ?

Answer 1

Вызовите callComponentMethod функцию класса CommunicationService вместо вызова onOpen.Во-вторых, если вы хотите передать информацию, вы можете сделать это, передав значение в функцию callComponentMethod.

Ниже приведен измененный код

CommunicationService

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CommunicationService {

  // Observable string sources
  private onOpen = new Subject<any>();

  // Observable string streams
  onOpen = this.onOpen.asObservable();

  // Service message commands
  callComponentMethod(info:any) {
    this.onOpen.next(info);    //<-- pass the value to subscribers
  }

}

Компонент1

import { Component } from '@angular/core';
import { CommunicationService } from './communication.service.ts'

@Component({
  selector: 'app-comp1',
  template: `
    <button type="button" (click)="callMethod()">Call method from Component1</button>
  `
})
export class Component1 {

  constructor( private communicationService: CommunicationService  ) { }

  callMethod = function () {
    let obj = { name : "john" }; //<-- you can pass the value from callMethod
    this.communicationService.callComponentMethod(obj);   //<-- changed here
  }

}

Answer 2

В вашей реализации довольно много неправильных вещей. Вот рабочий пример того, чего вы хотите достичь:

* ** 1003 тысяча два * Пример

Вам не нужно использовать Subject, вы можете просто использовать обычную наблюдаемую и затем «выдвинуть» новые значения в эмиттер для этой наблюдаемой:

export class CommunicationService {
  // Observable string sources
  private emitter: any;
  public messageInbox: Observable<any>

  constructor(){
     this.messageInbox = Observable.create(e => this.emitter = e);
  }

  // Service message commands
  public SendMessage() {
    this.emitter.next("hello");
  }

Код в ваших компонентах был в основном нормальным.