Question

我在工作中使用AngularJS（1.5）并创建了我的第一个Angular2应用程序。现在我有一个可观察的问题。

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

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

Answer 1

您的问题可以使用Subject（而不是Emitter），Observable和switchMap（Observable的功能，你可以谷歌如何使用）来解决。请参阅下面的示例代码段。

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

如果您想重新加载门票列表，可以调用重新加载功能。

Angular2 - 从其他组件

1 个答案: