Senden Sie Daten an alle Abonnenten Elemente mit beobachtbaren - angular2

Question

Ich möchte Daten an meine alle Elemente namens "modal" senden, aber nur eine von ihnen empfangen Nachricht.

Ich habe einen Dienst:

@Injectable() 
export class ModalService { 

private _isOpen = new Subject(); 
isOpen$ = this._isOpen.asObservable(); 

open(id: string) { 
    this._isOpen.next({isOpen: true, id: id}); 
} 

close(id: string) { 
    this._isOpen.next({isOpen: false, id: id}); 
} 

und Komponente:

import {Component, Input} from 'angular2/core'; 
import {Observable} from 'rxjs/Observable'; 
import {Subject} from 'rxjs/Subject'; 

import {ModalService} from './modal.service'; 


@Component({ 
    selector: 'modal', 
    template: ` 
    <ng-content></ng-content>`, 
    styleUrls: ['app/workshop/modal.component.css'], 
    providers: [ModalService], 

}) 

export class ModalComponent { 

@Input() ID; 

private show = false; 

constructor(private _modal: ModalService) { 

    this._modal.isOpen$.subscribe(
     (value) => { 
      console.log(value) 
      if(this.ID === value.id) { 
       this.show = value.isOpen; 
      } 
     } 
    ); 

} 

open() { 
    this._modal.open(this.ID); 
} 

close() { 
    this._modal.close(this.ID); 
} 

} 

Alle funktionieren gut, aber das Problem auftreten, wenn ich Dienst in irgendeiner anderen Komponente injizieren will und Nachricht an Rest der Abonnent senden. Ich weiß nicht, wie ich Nachricht für alle Arten von "Modal" teilen kann. Ich kann DOM-Element haken, aber ich habe ein Problem mit Component. Wie kann ich alle "modalen" Elemente mit beobachtbaren verknüpfen?

Vielen Dank für Hilfe

Answer 1

In der Tat, müssen Sie die gleiche Instanz für all diese Komponenten teilen. Legen Sie dazu den Dienst in das providers Attribut der Hauptkomponente fest:

@Component({ 
    (...) 
    providers: [ ModalService ] 
}) 
export class AppComponent { 
    (...) 
}