2017-12-13 19 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); 
    } 

} 

내가 서로 원하는 구성 요소는 앱 주문 페이지에서 티켓의 목록을 다시로드 :

this.ticketService.emitEvent(true); 

그래서,이 예제는 작동하지만 그 미친. 구독 신청을해야합니다. 그게 문제 야? 다른 가능성이 있습니까?

답변

1

귀하의 문제는 제목 (에미 터 대신), 관찰 가능 및 switchMap (관찰 가능 기능, 사용법에 대해서는 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(); 
} 

그런 다음 다시로드 함수를 호출 할 수 있습니다.