Angular2 Observable 服务似乎不能跨组件工作

Question

我在 Angular2 中有一个应用程序。其中有一个包含导航链接等的顶级组件。路由器插座嵌套在其中。我想要对其中一个嵌套页面执行操作以反映顶级组件中的更改。

我试图在 Angular2 中实现 Observable 服务。它在同一个组件中工作。但是当我尝试从根级别订阅 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 服务。

希望对您有所帮助！！

Angular2 Observable 服务似乎不能跨组件工作

Angular2 Observable service dosen't seem to be working across components

observable

typescript

angular