Question

以下是Plunker项目的链接。哪里有两个组件渴望和懒惰，也有共享服务，在两个组件上使用。

如何更新模块组件中的服务变量，以便惰性模块中的变量自动更新？

[Plunker example][1]
[1]: https://plnkr.co/edit/L2ypUQZiltSPXnLlxBoa?p=preview

Answer 1

您有这种行为是因为子注入器创建了新的服务实例。要为应用程序创建一个服务实例，您应该使用.forRoot()方法

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SomeComponent } from './other.component';
import { SharedModule } from './shared/index'
import { SomeService } from './some.service'; 

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [ SomeComponent ],
  exports: [ SomeComponent ]
})
export class OtherModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      // here you put services to share
      providers: [SomeService]
    }
  }
}

// and in AppModule
@NgModule({
  imports: [
    CommonModule, 
    SharedModule, 
    OtherModule.forRoot()
  ],
  declarations: [ SomeComponent ],
  exports: [ SomeComponent ]
})

它允许您在组件中使用SomeService的一个实例。

我已经更新了你的plunker。请看看on changed example

Answer 2

您可以使用Observable来实现此目的。此可观察对象存储在您的服务中，其他可以subscribe存储在此可观察对象中。下面是一个示例，其中我删除了标准的Angular内容以提高可读性：

<强> service.ts

@Injectable()
export class MyService {
    // BehaviorSubject sends last known value when someone subscribes. 
    public isAuthenticated$ = new BehaviorSubject<boolean>(false);

    changeAuthenticated() {
       // broadcast true to all subscribers
       this.isAuthenticated$.next(true);
    }

}

<强> component.ts

myService.isAuthenticated$.subscribe(authenticated => {

    if (authenticated) {
        // do stuff
    }

});

因此，当MyService中的isAuthenticated$发生更改时，它将触发所有订阅者。如果没有订阅者，请不要触发它。

有关Observables的更多信息：https://angular-2-training-book.rangle.io/handout/observables/using_observables.html

Angular 2：如何更新模块组件中的服务变量，以便惰性模块中的变量自动更新？

2 个答案: