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

Question

我正在使用 Ngx-webstorage ( https://www.npmjs.com/package/ngx-webstorage ) 注释将本地和 session 存储中的属性绑定(bind)到 typescript 变量。

在我的应用程序组件中，背景由其中一个属性定义，称为 JuegoDatos(数据集)。每个 JuegoDatos 都有一个文件 id，它定义了它的背景图像。

我想要的是，当 JuegoDatos 更改(sessionStorage 属性，绑定(bind)到 typescript 变量)检测到它时，我可以获取文件的新 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)
});