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

Question

我在使用不同路由的两个不相关组件之间同步数据时遇到问题。

如果我这样做，它会起作用：

但我需要在单独的路线上使用这两个组件： 本地主机：4200/a（组件A） localhost:4200/b (组件B)

这里是代码： 服务：

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

组件A：

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

html:

{{message}}

组件B：

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

如果我在 componentB 中触发 onChange 函数，它应该在两个组件中显示“FROM ACTIVATOR”：

Answer 1

working stackblitz

StoreService 应该在模块提供者中注册如下：

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

使用 Angular7+，我们可以通过以下方式将服务装饰为单例

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