如何在角度不相同的路径之间的不相关组件之间同步数据（rxjs 6）

Question

I have problem syncing data between two unrelated components with different route.

if I do this it works:

But I need the two components on a separate route: localhost:4200/a (componentA) localhost:4200/b (componentB)

here the code: service:

private messageSource = new BehaviorSubject('default');
  currentMessage = this.messageSource.asObservable();
  constructor() {}
  changeMessage(message: string) {
    this.messageSource.next(message)
  }

componentA:

message: string;
  constructor(private ts: StoreService) {}
  ngOnInit() {
    this.ts.currentMessage.subscribe(message => this.message = message)
  }

html:

{{message}}

componentB:

message: string;
  constructor(private ts: StoreService) { }
  ngOnInit() {this.ts.currentMessage.subscribe(message => this.message = message)}

  onChange() {
    this.ts.changeMessage('FROM ACTIVATOR');
  }

html:

<button type="button" (click)="onChange()">Activate!</button>
{{message}}

if I trigger onChange function in componentB it should display 'FROM ACTIVATOR' in both components:

Answer 1

working stackblitz

StoreService should be registered in module providers as below:

@NgModule({
   declarations: [ AppComponent],
   imports: [ 
      AppRoutingModule, 
      BrowserModule, FormsModule, HttpModule 
   ],
   bootstrap: [ AppComponent ],
   providers: [StoreService] // Injected here
})
export class AppModule { }

With Angular7+ we can decorate the service as singleton by following

@Injectable({
   providedIn: 'root'
})
export class StoreService {
}