如何订阅更改变量？答案

【问题标题】：How subscribe to change variable?如何订阅更改变量？
【发布时间】：2018-02-21 08:43:29
【问题描述】：

请帮助我订阅更改的变量。我制作简单的微调器。 Spinner 状态(true|false) 存储在服务中：

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'。

【问题讨论】：

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

标签： javascript angular rxjs

【解决方案1】：

因为您要返回一个可观察对象并将值放入布尔值，所以您可以将变量的类型更改为可观察对象，并使用异步管道获取值或将您的“数据”映射为布尔值，如果这是您想要的

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>

【讨论】：