Javascript 如何订阅更改变量？

请帮助我订阅已更改的变量。我只做旋转器。微调器状态（真|假）在用存储：

import { Injectable } from '@angular/core';
import { Response, Headers, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class GlobalVarsService {
    private isVisibleSpinner: boolean = false;

  getSpinnerState(): Observable<boolean> {
    return this.isVisibleSpinner;
  }; 

  setSpinnerState(state): void {
    console.log('setSpinnerState', state);
    this.isVisibleSpinner = state;
  };    
}

但控制台输出遵循eror消息：

类型“boolean”不可分配给类型“Observable”

---

因为您要返回一个可观察的值并将其放在布尔值中，所以您可以将is变量的类型更改为可观察的，并使用异步管道获取值，或者将“数据”映射为布尔值（如果需要）

export class AppComponent {
    private isVisibleSpinner: Observable<boolean>;

  constructor(private globalVarsService: GlobalVarsService) {  
        this.globalVarsService.getSpinnerState().subscribe(data => {
          console.log(data);
          this.isVisibleSpinner = data;
        });     
  }
}

导出类AppComponent{
私有isVisibleSpinner：可观察；
构造函数（专用globalvarservice:globalvarservice）{
this.globalvarservice.getSpinnerState（）.subscribe（数据=>{
控制台日志（数据）；
this.isVisibleSpinner=数据；
});     
}
}

app.component.html

加载。。。

因为您要返回一个可观察对象并将值放在布尔值中，所以您可以将可观察对象映射到所需的类型中

import { Component } from '@angular/core';
import { Response } from '@angular/http';
import 'rxjs/add/operator/map'
import { GlobalVarsService } from './services/global-vars.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    private isVisibleSpinner: boolean;

  constructor(private globalVarsService: GlobalVarsService) {  
        this.globalVarsService.getSpinnerState().subscribe(data => {
          console.log(data);
          this.isVisibleSpinner = data;
        });     
  }
}

export class AppComponent {
    private isVisibleSpinner: Observable<boolean>;

  constructor(private globalVarsService: GlobalVarsService) {  
        this.globalVarsService.getSpinnerState().subscribe(data => {
          console.log(data);
          this.isVisibleSpinner = data;
        });     
  }
}

<div class="spinner-backdrop" *ngIf="isVisibleSpinner | async"></div>
<div class="spinner-area" *ngIf="isVisibleSpinner | async">
    <span class="spinner">loading...</span>
</div>