Angular2 관찰 가능한 서비스가 구성 요소에서 작동하지 않는 것 같습니다.

Question

각도가 2 인 앱이 있습니다. 어디에 탐색 링크가 포함 된 최상위 구성 요소가 있습니다. 그리고 라우터 출력은이 안에 중첩되어 있습니다. 최상위 수준의 공동 작업자의 변경 사항을 반영하기 위해이 중첩 페이지 중 하나에 대한 조치를 원합니다.

Observable 서비스를 Angular2로 구현하려고 시도했습니다. 동일한 구성 요소 내에서 작동합니다. 그러나 루트 레벨에서 Observable을 구독하려고 할 때. 나는 어떤 사건도 얻지 못하고있다.

내 서비스는 다음과 같습니다

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

@Injectable() 
export class Announcer { 

    // Observable sources 
    private cartTotalSource = new Subject<number>(); 
    private wishlistTotalSource = new Subject<number>(); 

    // Observable sources 
    cartTotalAnnounced$ = this.cartTotalSource.asObservable(); 
    wishlistTotalAnnounced$ = this.wishlistTotalSource.asObservable(); 

    // Service message commands 
    announceCartChange(value: number) { 
     this.cartTotalSource.next(value); 
    } 
    announceWishlistChange(value: number) { 
     this.wishlistTotalSource.next(value); 
    } 
} 

나는 그것이 작동하는 구성 요소의 맥락에서 그것을 사용하는 경우, 내가 발표, 같은 파일 내에서 업데이 트에 가입 할 수 있습니다 :

ngOnInit(){ 
    this.announcer.cartTotalAnnounced$.subscribe(total => { 
     this.cartTotal = total; 
    }); 
    this.announcer.wishlistTotalAnnounced$.subscribe(total => { 
     this.wishlistTotal = total; 
    }); 
} 

getCartAndWishlistTotal() { 
    this.cartService.getCartTotal(CartType.Cart, "") 
     .subscribe(total => { 
      this.announcer.announceCartChange(total); 
     }); 

    this.cartService.getCartTotal(CartType.Wishlist, "") 
     .subscribe(total => { 
      this.announcer.announceWishlistChange(total); 
     }); 
} 

하지만 언제, 위의 코드에서 ngOnInit()에서 똑같은 코드를 사용하여 최상위 구성 요소에 있습니다. 구독자는 절대 실행되지 않습니다.

아무도 내가 잘못하고있는 방향으로 나를 가리킬 수 있습니까?

Answer 1

Announcer 서비스 제공 업체를 확인하십시오. 최상위 레벨뿐 아니라 의도 한 구성 요소에서 제공하고 있습니까?

예, 서비스 인스턴스를 두 개 만들 수 있습니다.

최상위 구성 요소에만 Announcer 서비스를 제공해야합니다.

희망이 도움이됩니다!