服务中的Angular 2和rxjs主题没有在组件上更新

时间:2017-02-18 13:04:25

标签: javascript angular typescript observable subject

大家好,感谢您的帮助... 我正在构建一个应用程序,我希望有一个用于处理某些配置的服务,它由不同的模块共享。 我真的不知道这是不是最好的方法,但是我使用的是angularJS。

配置服务

sidebarCompress: Subject<boolean> = new Subject<boolean>();
public sidebarCompressed: Observable<boolean> = this.sidebarCompress.asObservable();

constructor() {}

compressSidebar(val: boolean = false) {
    this.sidebarCompress.next(val);
    // this is firing when used
    console.log('changed on service');
}

补充工具栏

constructor(
    private conf: ConfigService,
) {
    conf.sidebarCompressed.subscribe(
        sidebarCompressed => {
            // this is not firing
            console.log('changed on sidebar component');
    });
}

任何其他组件

constructor(
    private conf: ConfigService,
) { }

ngOnInit() {
    // The idea is to use it in a fn (not always on init)
    this.conf.compressSidebar(true);
}

所以,补充工具栏组件订阅不起作用,任何人都知道我在这里做错了什么,或者我应该采取不同的方法!?

再次,非常感谢。

1 个答案:

答案 0 :(得分:4)

如果您在@NgModule()中提供服务,则会获得整个应用程序的单个实例,除非您还在延迟加载的模块的@Component()@NgModule()中提供该实例

@NgModule()中提供的提供程序被提升到应用程序根注入器中,模块的导入顺序很重要,如果提供程序密钥匹配,imports: []中稍后列出的模块将覆盖先前的模块提供程序。 AppModule @NgModule()中添加的提供商直接覆盖导入模块的提供商。

延迟加载的模块有自己的&#34;根范围&#34;,它是应用程序根注入器的子注入器。

我认为您的问题是由在非延迟加载的延迟加载模块中提供服务引起的,这导致了2个实例。

注入此模块的组件或服务从应用程序根获取实例,如果它们是非延迟加载的模块的一部分,则从延迟加载的模块获取延迟加载的模块。< / p>

作为解决方案,从延迟加载的模块中删除提供程序。 您还可以在forRoot()中实现MyLazyLoadedModule.forRoot()并导入AppModule,以便将延迟加载的模块的服务提供给应用程序根注入器,并避免重复的服务实例。