2016-11-07 6 views
1

アプリケーションAngular2 - サービス変数を初期化するのを待っ

  • MapViewComponent
  • SearchComponent(MapViewComponentのオブジェクトが必要です)
  • MapService

はこれまでのところ、私は内部のSearchComponentを置いMapViewComponentのテンプレートなので、を使ってSearchComponentに渡すことができました。しかし、検索コンポーネントはレイアウト/ HTML DOM内の別の場所に表示する必要があるため、MapViewComponentを検索に渡すためにサービスを使用しなければならないと思います。

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? 
    } 
} 

getView()が前に呼び出される可能性がありますので、それは明らかに文句を言わない、そのように動作しますsetView()

+0

の違いについて簡単に説明するために、あなたはあなたのゲッターで観察/約束を返しますが、この'getView()。then(あなたの関数...)'を実行し、ビューが設定されると、あなたの観測可能性の中であなたの約束/放出を解決することができます。編集:MapViewとは何ですか? – Supamiu

答えて

3

SubjectBehaviorSubjectまたはReplaySubjectのいずれか)を使用してください。 Subjectは、プロデューサとコンシューマの両方として機能します。その消費者は、観察可能なものと同様に、それを購読することができます。そして、プロデューサーはそれを使って消費者にメッセージを発信することができます。例えば

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(); 
    } 
} 
加入者がちょうどsuscribeする必要

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(); 
    } 
    } 
} 

MapViewComponentだけsetCurrentViewを呼び出す必要があり、それはまた

参照を送っていますとき、それは自動的に加入者によって処理されます:

  • This postあなたはビューとしてan`Observable `や`約束 `を格納する必要があり Subject/ BehaviorSubject/ ReplaySubject
関連する問題