如何订阅更改变量？

Posted 2023-03-13

【中文标题】如何订阅更改变量？

【英文标题】：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'。

【问题讨论】：

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

【参考方案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>