[英]How subscribe to change variable?
请帮助我订阅更改的变量。 我只是做微调器。 服务中的微调状态(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;
});
}
}
但是控制台输出遵循错误消息:
类型“布尔”不能分配给类型“可观察”。
因为您要返回一个observable并将值放入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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.