2017-12-13 3 views
0

私は職場でAngularJS(1.5)を使用し、最初のAngular2アプリケーションを作成しました。今私は観察可能な小さな問題があります。Angular2 - 他のコンポーネントからhttp.getを放出

私はこのようなサービス(TicketService)があります。

import { Injectable, EventEmitter } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Globals } from '../../globals'; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 

export class TicketService { 

private http; 
private emitter: EventEmitter<any>; 

constructor (http: Http) { 
    this.http = http; 
    this.emitter = new EventEmitter(); 
} 

findAll() { 
    return this.http.get(Globals.BASE_API_URL + '/ticket'); 
} 

emitEvent(value) { 
    this.emitter.emit(this.findAll()); 
} 

getEmit() { 
    return this.emitter; 
} 

をそして、私はすべてのチケット(アプリ次ページ)一覧表示するためのコンポーネントがあります。

import { Component, OnInit } from '@angular/core'; 
import { TicketService } from '../../ticket/ticket.service'; 


@Component({ 
    selector: 'app-order-page', 
    templateUrl: './order-page.component.html', 
    styleUrls: ['./order-page.component.css'] 
}) 
export class OrderPageComponent implements OnInit { 

    private states; 
    private ticketService: TicketService; 
    private tickets; 
    private isPreview; 

    constructor (ticketService: TicketService) { 
     this.ticketService = ticketService; 
    } 

    ngOnInit() {    
     this.ticketService.getEmit().subscribe(value => { 
      value.subscribe(v => { 
       this.tickets = v.json(); 
      }) 
     }); 

     this.ticketService.emitEvent(true); 
    } 

} 

を今、私は別のからしたいですコンポーネントは、app-order-pageのチケットの一覧をリロードします。

this.ticketService.emitEvent(true); 

この例はうまくいきますが、それは狂っています。私は購読で購読しなければならない。問題ありますか?他の可能性はありますか?

答えて

1

あなたの問題は、Subject(Emitterではなく)、ObservableとswitchMap(Observableの機能、使用方法についてはGoogleで確認できます)を使用して解決できます。 以下のサンプルコードをご覧ください。

findAll(): Observable<any> { 
    return this.sampeSubject.switchMap(e => this.http.get(Globals.BASE_API_URL + '/ticket').map(resp => resp.json())); //this would return an Observable 
} 
reload(){ 
    this.sampeSubject.next(); 
} 

あなたはチケットのリストをリロードしたい場合は、その後、リロード関数を呼び出すことができます。

関連する問題