Angular-CLI 1.0.0-beta.18(昨日更新)でプロジェクトを作成しました。私はコンポーネントからサービスの変更を検出しようとしています。Observableへのサブスクリプションは決して引き起こされない
- 私は、サブスクリプションは、更新時にトリガー決してコンポーネント
- から、それに加入するサービス
- で観察可能なを作成します、私はthis answerからソリューションを実装しようとした/
this Plunkrおよびthis cookbook、ダイスなし。
ここimport { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { Article } from './article';
@Injectable()
export class ArticleService {
// Placeholder for article's
articles: Article[] = [
{ _id: 1, title: "Article 1", text: "Text for article 1", created: new Date() },
{ _id: 2, title: "Article 2", text: "Text for article 2", created: new Date() }
];
// Observable openArticle source
private _openArticleSource = new ReplaySubject<Article>(1);
// Observable openArticle stream
openArticle$ = this._openArticleSource.asObservable();
// Simulate GET /articles/:_id
getArticleById(_id: number): Article {
let article = this.articles
.filter(article => article._id === _id)
.pop();
console.log("Pushing article to observable : ", article) // This gets logged, along with the article
this._openArticleSource.next(article); // Should trigger the subscription, but doesn't
return article;
}
}
は、リスニングコンポーネントです:ここで
は、サービスの後、私は別のコンポーネントから
getArticleById(1)
呼び出して、私は、コンソールで"Pushing article to observable"
を見ることができるので、 import { Component } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { ArticleService } from '../article.service';
@Component({
selector: 'column-open-article',
templateUrl: './column-open-article.component.html',
providers: [ArticleService]
})
export class ColumnOpenArticleComponent {
openArticle;
subscription: Subscription;
constructor(private articleService: ArticleService) {
this.subscription = articleService
.openArticle$
.subscribe(article => {
console.log("Subscription triggered", article); // Never gets logged
this.openArticle = article; // Never gets updated
})
}
ngOnDestroy() {
// prevent memory leak when component is destroyed
console.log("Unsubscribing")
this.subscription.unsubscribe();
}
}
observableは更新されますが、サブスクリプションはトリガーされません。
サブスクリプションをサービス内に直接配置すると問題なく起動し、"Subscription triggered"
がコンソールに表示されます。
しかし、コンポーネントに同じコードを配置しても機能しません。
アイデア?
ああ、それはどのように動作するのです!サービスはシングル1のようなものだと思っていました。実際にはモジュールレベルで一度インポートしてから各コンポーネントにインポートする必要があります。落ち着きそれは今働きます、ありがとう! –
プロバイダごとにシングルトンです。複数のプロバイダがある場合、複数のインスタンスを取得します。 '@NgModule()'の 'providers :: []'はすべてルートスコープに持ち込まれているので、このようなプロバイダは複数存在しますが、コンポーネントやディレクティブのプロバイダに対しては、すべてのコンポーネントやディレクティブに対して異なるインスタンスを取得します。遅延ロードされたモジュールは、独自のルートスコープを取得します。 –