组件之间的通信-Angular 7

Question

在系列组件中，我使用方法设置localStorage.setItem ('value', 'aaa'); 用户单击方法：

        valueLocalStorage(value){ 
            localStorage.setItem('value', value);
        }

该值可以是aaa或bbb

如果localStorage更改其值，例如： localStorage.setItem('value', 'bbb');

当localStorage更改其值时，它想刷新另一个组件或在其中调用方法。

在组件<app-menu> </app-menu>有一种方法可以设置localStorage.setItem('value', 'aaa'); 或localStorage.setItem('value', 'bbb');

如何在另一个组件<app-container>更改localStorage的值，希望变量temp的值采用不同的值。

app-container.component.ts：

    <app-menu></app-menu>
    <div>{{temp}}</div>

我不知道该怎么做，谢谢您的帮助

Answer 1

您可以将BehaviorSubject用作RxJS。

  valueLocalStorage(): void {
    const val = 'aaa'
    localStorage.setItem('value', val);
    this.dataService.setValue(val);
  }
   getValueLocalStorage(): void {
    this.dataService.value$.subscribe(()=> this.value = localStorage.getItem('value'));
  }

https://stackblitz.com/edit/angular-i7tqka