I'm facing an issue with an observable in my service. The provided code below demonstrates this:
@Injectable({
providedIn: 'root'
})
export class MyService {
public globalVariable: BehaviorSubject<string> = new BehaviorSubject('');
}
A feature component is involved, called:
export class ComponentA implements OnInit {
constructor(public myService : MyService ) {
this.myService.globalVariable.next('newValue');
}
ngOnInit() {
this.myService.globalVariable.subscribe(_ => console.log('=> hello'));
}
}
The App Module setup looks like this:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ComponentAModule,
ComponentBModule,
AppRoutingModule
],
providers: [MyService],
bootstrap: [AppComponent]
})
export class AppModule {
}
Here is the structure of the project:
app-module.ts
app-routing.module.ts
-components
-- componentA
--- componentA.module.ts
--- componentA-routing.module.ts
--- componentA.component.ts
--- componentA.component.html
-- componentB
--- componentB.module.ts
--- componentB-routing.module.ts
--- componentB.component.ts
--- componentB.component.html
Upon navigating to componentA, I noticed the following behavior:
=> hello
=> hello
At this point, everything works as expected. The initial subscribe is triggered followed by the change in globalVariable initiated by componentA's constructor.
However, when switching to componentB and then back to componentA, the output changes to:
=> hello
=> hello
=> hello
Every time I navigate back to componentA, a new line is added. It seems like a new instance of MyService is created or the subscribe isn't being destroyed upon leaving?
Note: Lazy loading is not utilized in this scenario.