javascript - 服务中的 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);
}

所以，侧边栏组件订阅不起作用，有人知道我在这里做错了什么，或者我是否应该采取不同的方法!？

再次，非常感谢。

Answer 1

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

@NgModule()中提供的提供商被提升到应用程序根注入(inject)器中，其中模块的导入顺序很重要，模块稍后在 imports: [] 中列出。如果提供程序 key 匹配，则覆盖以前的模块提供程序。添加的提供商AppModule @NgModule()直接覆盖导入模块的提供者。

延迟加载的模块拥有自己的“根范围”，它是应用程序根注入(inject)器的子注入(inject)器。

我假设您的问题是由于在非延迟加载和延迟加载模块中提供服务引起的，这会导致 2 个实例。

注入(inject)此模块的组件或服务要么从应用程序根获取实例(如果它们是非延迟加载模块的一部分)，要么从延迟加载模块获取实例(如果它们是延迟加载模块的一部分)。

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