Обнаружение изменений переменных в localStorage angular 8

Question

У меня есть эта функция на вызове компонента navbar:

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

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

Итак, когда я щелкаю переменную addUsuario, меняем ее на false, если true, и на true, если false.

. проблема заключается в том, чтобы обнаружить эти изменения из другого компонента и передать его в HTML. if true, возьмите класс div, а if false - другой класс div.

Я пробовал с addEventlistener, но не работает.

Спасибо

Answer 1

Вы можете переместить функции в одноэлементную службу и отслеживать значение с помощью наблюдаемых. Попробуйте следующее

Общая служба

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

Компонент Navbar

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 для предоставления значения по умолчанию. Вы можете использовать Rx js Subject, если вы не используете sh для предоставления значения по умолчанию. Объяснение для pipe(take(1)) можно найти здесь .

Примечание. Хранение логического значения в локальном хранилище не является хорошей идеей. Потому что вы можете хранить только строки, и он возвращает значения в виде строк. Таким образом, вы не можете сделать что-то вроде *ngIf==="status" или *ngIf==="!status". Это будет *ngIf="status === 'true'" и *ngIf="status === 'false'".

Рабочий пример: Stackblitz

Answer 2

Вы можете сделать это в вашем машинописном тексте

создать глобальную переменную, подобную этой:

addUsuario:boolean;

getAddUsuario(){ 
if(window.localStorage.getItem('addUsuario') == 'false'){
window.localStorage.setItem('addUsuario','true');
//and do this one
addUsuario = true;
}else{
window.localStorage.setItem('addUsuario','false');    
addUsuario = false;  
}
return window.localStorage.getItem('addUsuario');

, а в вашем HTML вы можете использовать * ngIf, например:

<div *ngIf="addUsuario == true">
<!--Your div-->
</div>
<div *ngIf="addUsuario == false">
<!--your div-->
</div>