Angular2 - Warten auf Service Variable

Question

Anwendung initialisiert werden

• MapViewComponent
• SearchComponent (ein Objekt der MapViewComponent erfordert)
• MapService

Bisher stellte ich die SearchComponent innen die MapViewComponent s Vorlage, so konnte ich es an die SearchComponent übergeben, indem Sie @Inject(forwardRef(() => MapViewComponent)) verwenden. Aber da die Suchkomponente irgendwo anders im Layout/HTML-DOM angezeigt werden sollte, muss ich einen Dienst verwenden, um die MapViewComponent an die Suche zu übergeben.

MapViewComponent.ts:

export class MapViewComponent { 
    @Output() onMapViewCreated = new EventEmitter(); 

    private _view: any = null;  

    constructor(private mapService: MapService, private elRef: ElementRef) { 
    }   

    ngOnInit() { 
     this._view = new MapView({ 
      container: this.elRef.nativeElement.firstChild, 
      map: this._mapService.map, 
      center: [5.44, 36.947974], 
      rotation: 0, 
      autoResize: true 
     }) 

     this._view.then((view) => { 
      this.onMapViewCreated.next(view); 
      this._mapService.setView(view); 
     }); 

SearchComponent.ts:

export class SearchComponent { 

    constructor(private elRef:ElementRef, private mapService: MapService) { 
     var view = mapService.getView(); 
    } 
} 

MapService.ts:

@Injectable() 
export class MapService { 
    public setView(mv: MapView){ 
     this.view = mv; // what do I have to do here..? 
    } 

    public getView(){ 
     return this.view; // .. and here? 
    } 
} 

Es offensichtlich wird nicht so funktionieren, weil getView() könnte, bevor aufgerufen setView().

Answer 1

Sie sollten einen Subject (entweder BehaviorSubject oder ReplaySubject) verwenden. Die Subject fungiert sowohl als Produzent als auch als Verbraucher. Der Verbraucher kann es abonnieren, genau wie eine beobachtbare. Und der Produzent kann damit Nachrichten an die Verbraucher ausgeben. Zum Beispiel

import { ReplaySubject } from 'rxjs/ReplaySubject' 

@Injectable() 
export class MapService { 

    private _currentMapView = new ReplaySubject<MayView>(1); 

    setCurrentView(mv: MapView){ 
    this._currentView.next(mv); 
    } 

    get currentMapView$() { 
    return this._currentMapView.asObservable(); 
    } 
} 

Der Teilnehmer muss nur

import { Subscription } from 'rxjs/Subscription'; 

export class SearchComponent { 
    sub: Subscription; 
    view: MapView; 

    constructor(private elRef:ElementRef, private mapService: MapService) { 
    } 

    ngOnInit() { 
    this.sub = this.mapService.currentMapView$.subscribe(view => { 
     this.view = view; 
    }) 
    } 

    ngOnDestroy() { 
    if (this.sub) { 
     this.sub.unsubscribe(); 
    } 
    } 
} 

Die MapViewComponent nur muss die setCurrentView nennen, und es wird von den Teilnehmern zum suscribe automatisch gehandhabt werden, wenn es sich auch

See gesendet wird :

• This post für eine kurze Beschreibung über Unterschied zwischen Subject/BehaviorSubject/ReplaySubject