Observable에 대한 구독이 실행되지 않습니다

Question

Angular-CLI 1.0.0-beta.18 (어제 업데이트 됨)으로 프로젝트를 만들었습니다. 구성 요소에서 서비스의 변경을 감지하려고합니다. 내가 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(); 
      } 
  } 
  

  관찰 가능은 업데이트되지만 구독을 트리거하지는 않습니다.

  서비스에 직접 가입하면 문제없이 실행되며 콘솔에 "Subscription triggered"이 표시됩니다.

  하지만 구성 요소에 동일한 코드를 삽입해도 작동하지 않습니다.

  아이디어가 있으십니까?

Answer 1

ArticleService의 여러 인스턴스가있는 것 같습니다.

모든 구성 요소 인스턴스에 ArticleService 인스턴스가 새로 추가되므로 모든 구성 요소에 ArticleService을 제공하지 마십시오.

모두 분사 된 부모로부터 동일한 인스턴스를 얻을 수 있도록 하나 공통의 부모 구성 요소에 제공

또는

가 @NgModule{ providers: [ArticleService]}에서, 다음이 애플리케이션의 루트 스코프 andevery 컴포넌트에 제공한다 제공 ArticleService을 삽입하는 서비스는 동일한 인스턴스가 주입되게합니다.