3

このコンポーネントに、オブザーバブルを返すサービスから文字列データを取得させようとしています

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() を 2 回呼び出すまで表示されませんでした。なぜ最初にトリガーされなかったのだろうか。

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

1 に答える 1

1

サブスクライブされたメソッドが 2 回目の 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();
}
于 2016-10-20T19:16:23.030 に答える