angularjs - angular 2 observable.subscribe 在第二次调用之前不会执行

Question

我试图让这个组件从返回可观察对象的服务中获取字符串数据

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TabFourService } from "./tabfour.service";
import { Subscription } from "rxjs";

@Component({
    selector: 'tab-four',
    template: `
                {{title}}
              `
})

export class TabFourComponent implements OnInit, OnDestroy{
    title: string = "This is Tab four";

    subscription: Subscription;

    constructor(private tabfourService: TabFourService){}

    ngOnInit(){
        console.log("now in init");
        this.getItems();
        this.getItems();
    }

    getItems(){
        console.log("now in get items");
        this.subscription = this.tabfourService.getItems()
                                .subscribe(data => console.log("testing observable"));
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

这是一个简单的服务:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
import { Observable } from "rxjs";

@Injectable()
export class TabFourService {
    items: string;

    private itemSource = new Subject<string>();

    constructor(){}

    itemSource$ = this.itemSource.asObservable();

    getItems(): Observable<string> {
        this.itemSource.next("aaa");
        return this.itemSource$;
    }

}

我在@NgModule() 中将服务列为提供者，以便它可以被所有组件实例共享。还有一个用于 TabFourComponent 的路由器，所以每次我导航到它时，我都应该在控制台中看到“testing observable”。但直到我两次调用 getItems() 时它才显示出来。我想知道为什么它没有在第一时间被触发。

tabfour.component.ts:20  now in init
tabfour.component.ts:26  now in get items
tabfour.component.ts:26  now in get items
tabfour.component.ts:28  testing observable

编辑:

而在另一种情况下，服务从 http.get 提供数据

// in service
getLibraryFromDatabase(): Observable<any[]> {
  return this.http.get(<some url>)
             .map(data => data.json())
             .catch(this.handleError);
}

组件订阅后不需要再次调用服务的方法。

// in component
ngOnInit() {
    this.subscription = this.libraryService.getLibraryFromDatabase()
                        .subscribe(libs => this.createLibs(libs));
}

Answer 1

如果订阅的方法直到第二次 getItems() 执行才被调用，那是因为事件在订阅被接管之前被触发。在 ngOnInit 方法中注册订阅(这是执行此类操作的最佳位置)，然后调用触发您订阅的事件的方法:

ngOnInit() {
    this.subscription = this.tabfourService.getItems()
                            .subscribe(data => console.log("testing observable"));
    // The subscription has been taken in charge, now call the service's method
    this.tabFourService.getItems();
}