Angular 6 - 检测应用程序另一部分中的变量何时发生变化

Question

我正在使用Ngx-webstorage（https://www.npmjs.com/package/ngx-webstorage）注释将本地和会话存储中的属性绑定到打字稿变量。

在我的应用程序组件中，背景由这些属性之一定义，称为JuegoDatos（数据集）。每个 JuegoDatos 都有一个文件 ID，它定义了它的背景图像。

我想要的是，当 JuegoDatos 更改（sessionStorage 属性，绑定到打字稿变量）检测到它时，我可以获取文件的新 id 并更新背景。

我通过使用间隔使其发挥作用。

@SessionStorage(GlobalVariable.JUEGO_DATOS_KEY) private juegoDatosActual: JuegoDatos;

    private idImagen: number;
    private urlImagenJuegoDatos: SafeResourceUrl;

// Some code

ngOnInit() {
        setInterval(() => {
            if (this.juegoDatosActual == null || this.juegoDatosActual.imagenFondo == null) {
                return;
            }
            if (this.idImagen === this.juegoDatosActual.imagenFondo.id) {
                return;
            }

            this.idImagen = this.juegoDatosActual.imagenFondo.id;
            this.reloadImagen();
        }, 1000);
    }

但它看起来有点老套而且非常丑陋。背景也会闪烁。

Answer 1

您需要使用BehaviorSubject来检测变化。

创建一个类似的服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class JuegoDatosChangeService {

constructor() { }

public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  changeData(value: any) {
    this.status.next(value);
  }
}

更改“JuegoDatos”时，请致电服务，

this.juegoDatosChangeService.changeData(data);

并检测变化：

this.juegoDatosChangeService.status.subscribe((val) => {
    console.log(val)
});