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

【问题标题】：Angular2 - emit http.get from other componentAngular2 - 从其他组件发出 http.get
【发布时间】：2017-12-14 08:14:07
【问题描述】：

我在工作中使用 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;
}

我有一个组件可以列出所有票证（app-order-page）：

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

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

【问题讨论】：

标签： angular observable rxjs5

【解决方案1】：

您的问题可以使用 Subject(而不是 Emitter)、Observable 和 switchMap(Observable 的功能，您可以谷歌了解如何使用)来解决。请参阅下面的示例代码 sn-p。

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 函数。

【讨论】：