角度2：组件中未更新服务变量

Posted 2021-04-07

我正在尝试在组件中使用服务变量，但是当调用服务函数时，更新的变量不会在组件中更改

这是我的服务

import { Injectable } from '@angular/core';
import { environment } from 'environments/environment';
import { Observable } from 'rxjs/Observable';

const API_URL = environment.apiUrls.coreServiceUrl;

@Injectable()
export class LoadingBarService {
  showspinner = {isStart : false};
  start() {
    this.showspinner.isStart = true;
    console.log(this.showspinner);
    console.log('start');
  }
  complete() {
    this.showspinner.isStart = false;
    console.log('complete');
  }
}

我想在我的组件中使用showspinner这是我的组件代码

component.ts

import { Component, OnInit, Input } from '@angular/core';
import { LoadingBarService } from './../../services/pageloader/spinner';

@Component({
  selector: 'spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit {
  showspinner;
  public constructor(private loadingBarService: LoadingBarService) {

  }

  ngOnInit(){
    this.showspinner = this.loadingBarService.showspinner;
  }
}

component.html

<div *ngIf="showspinner.isStart" class="loading-icon"></div>{{showspinner | json}}

但这个showspinner.isStart变量没有实时更新。

答案

您只需在ngOnInit上设置值..因此变量this.showSpinner永远不会更改。

一种解决方案是直接绑定服务中的值...不是很优雅，但在大多数情况下都可以使用。如果更改检测跳过此组件，则无效。

<div *ngIf="loadingBarService.showspinner" class="loading-icon"></div>{{showspinner | json}}

第二个解决方案和RECOMMENDED几乎相同，但使用了BehaivourSubject。使用这种方法，您将被激活，如果您在区域内执行操作，则由于异步管道和隐式markForCheck调用，将始终显示微调器。

@Injectable()
export class LoadingBarService {
   private showspinner = new BehaviorSubject(false);
   public isShowingSpinner$;
   constructor() {
       this.isShowingSpinner$ = this.showspinner.asObservable();
   }
   start() {
      this.showspinner.next(true);
      console.log(this.showspinner);
      console.log('start');
   }
   complete() {
      this.showspinner.next(false);
      console.log('complete');
   }
}

并且在您的html中使用异步管道订阅它，因此您确保调用markForCheck并且也更干净。

<div *ngIf="loadingBarService.isShowingSpinner$ | async" class="loading-icon"></div>{{showspinner | json}}

希望这可以帮助。