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

Question

Below is a link to project on Plunker. where there are two components eager and lazy, also there is shared service which is used on both components.

How to update service variable in a module's component so that the variable in lazy module updates automatically?

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

Answer 1

You have this behavior because of child injector created new instance of the service. For creating one instance of the service for application, you should use .forRoot() method

 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 ] }) 

It will allow you to use one instance of SomeService in your components.

I've updated your plunker. Pleas, have a look on changed example

Answer 2

You can achieve this by using an Observable . This observable is stored in your service and other can subscribe to this observable. Below is an example in which I have removed the standard Angular stuff to improve readability:

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
    }

});

So when isAuthenticated$ inside MyService is changed it fires to all subscribers. Please not it doesn't fire if there are no subscribers.

More info about Observables: https://angular-2-training-book.rangle.io/handout/observables/using_observables.html