组件之间的通信- Angular 7

Question

在族构件中，我使用方法setting 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');的方法

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

app-container.component.ts：

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

3.我不知道该怎么做，谢谢你的帮助

Answer 1

你可以使用BehaviorSubject it 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