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

Question

大家好，并感谢您提前提供的帮助...我正在构建一个应用程序，我想拥有一个用于处理某些配置的服务，并且该服务由不同的模块共享。 我真的不知道这是否是最好的方法，但是自从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);
}

因此，Sidebar组件订阅无法正常工作，任何人都知道我在这里做错了，还是我应该采用其他方法！

再次，非常感谢。

Answer 1

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

@NgModule()中提供的提供程序被提升到应用程序根目录注入器中，在那里模块的导入顺序很重要，并且稍后在imports: []列出的模块imports: []如果提供程序键匹配，则imports: []覆盖以前的模块提供程序。 AppModule的@NgModule()添加的提供程序将直接覆盖导入模块的提供程序。

延迟加载的模块有自己的“根作用域”，它是应用程序根注入器的子注入器。

我认为您的问题是由于在非延迟加载和延迟加载的模块中提供服务而导致的，导致出现2个实例。

注入此模块的组件或服务（如果它们是非延迟加载的模块的一部分）从应用程序根目录获取实例，或者当它们是延迟加载的模块的一部分时从延迟加载的模块获取实例。

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