时间戳

首页 > 解决方案 > 检测到 localStorage 角度 8 的变量变化

html - 检测到 localStorage 角度 8 的变量变化

问题描述

我在组件调用导航栏上有这个功能：

getAddUsuario(){
if(window.localStorage.getItem('addUsuario') == 'false'){
  window.localStorage.setItem('addUsuario','true');

}else{
  window.localStorage.setItem('addUsuario','false');      
}
return window.localStorage.getItem('addUsuario');

因此，当我单击变量 addUsuario 时，如果为 true，则更改为 false，如果为 false，则更改为 true。

问题是我想检测来自另一个组件的更改并将其传递给 HTML。如果为真，则采用一个 div 类，如果为假，则采用另一个 div 类。

我尝试使用 addEventlistener 但不起作用。

谢谢

标签： htmlangular

解决方案

您可以将函数移动到单例服务并使用 observables 监控值。尝试以下

共享服务

import { BehaviorSubject, Observable } from 'rxjs';  // <-- included 'Observable' here - with capital 'O'

@Injectable()
export class SharedService {
  private addUsuarioSource = new BehaviorSubject<string>('false');
  public addUsuario$ = this.addUsuarioSource.asObservable();

  constructor() {
    this.addUsuario$.subscribe(status => window.localStorage.setItem('addUsuario', status));   // <-- changed 'userStatus' to 'status'
  }

  getAddUsuario(): Observable<string> {   // <-- capital 'O' instead of small 'o'
    let userStatus = window.localStorage.getItem('addUsuario');
    userStatus = (userStatus === 'false' || userStatus == null) ? 'true' : 'false';
    this.addUsuarioSource.next(userStatus);
    return this.addUsuario$;
  }
}

导航栏组件

import { pipe } from 'rxjs';
import { map, take } from 'rxjs/operators';

export class NavbarComponent implements OnInit() {
  subscription: any;

  ngOnInit() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
    this.subscription = this.sharedService.getAddUsuario().pipe(take(1)).subscribe(status => {
      // this callback will be called only once due to `pipe(take(1))`
      // `status` variable with value 'true' or 'false' as string
    });
  }
}

另一个组件

this.sharedService.addUsuario$.subscribe(status => {
  // this callback will be called each time a new user status is pushed
  // `status` variable with value 'true' or 'false' as string
})

我BehaviorSubject用来提供默认值。Subject如果您不想提供默认值，可以使用 Rxjs 。pipe(take(1))可以在这里找到解释。

注意：在本地存储中存储布尔值不是一个好主意。因为您只能存储字符串，并且它将值作为字符串返回。所以你不能做类似*ngIf==="status"or 的事情*ngIf==="!status"。这将是*ngIf="status === 'true'"和*ngIf="status === 'false'"。

工作示例：Stackblitz

推荐阅读