Angular2 - 从其他组件发出 http.get

Question

我在工作中使用 AngularJS (1.5)，现在创建了我的第一个 Angular2 应用程序。现在我对 observable 有点问题。

我有这样的服务 (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);

所以，这个例子可行，但它太疯狂了。我必须在订阅中进行订阅。那是问题吗？我还有其他可能性吗？

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

如果您想重新加载工单列表，您可以调用 reload 函数。

Angular2 - 从其他组件发出 http.get

Angular2 - emit http.get from other component

observable

rxjs5

angular