angular - 如何在 Angular 不同的不相关组件之间同步数据(rxjs 6)

Question

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

如果我这样做它会起作用:

但我需要在单独的路线上使用这两个组件:localhost:4200/a (componentA)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 {
}