如何订阅更改变量？

Question

请帮助我订阅更改的变量。我做了简单的微调。服务中的微调状态（真|假）存储：

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

在组件模板中，我通过条件显示微调器：

<div class="nav">
  <a [routerLink]="['/select']">select</a>
  <a [routerLink]="['/output']">output</a>
</div>

<router-outlet></router-outlet>

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

在组件中，我尝试订阅服务isVisibleSpinner变量中的更改：

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

但控制台输出遵循错误消息：

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

Answer 1

因为您正在返回一个可观察值并将值放入boolean中，所以您可以将is变量的类型更改为observable，并使用异步管道来获取值，或者将您的“数据”映射到boolean，如果您需要的话

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

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

app.component.html

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