如何在角度应用中包含加载微调器？

Question

我正在尝试向我的应用程序添加一个微调器但是微调器没有出现。

控制台或终端中没有出现错误，但是微调器没有出现。

loader.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoaderService {
public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

display(value: boolean) {
    this.status.next(value);
}
}

app.module.ts

导入LoadService并将其添加到providers数组

app.component.ts

import { LoaderService } from './services/loader.service';

export class AppComponent {
  //for the spinner
  showLoader: boolean;
  //LoaderService is for the spinner
  constructor(private loaderService: LoaderService) { }
  //for the spinner
  ngOnInit() {
    this.loaderService.status.subscribe((val: boolean) => {
      this.showLoader = val;
    });
  }
}

app.component.html

<router-outlet>
<div *ngIf="showLoader">
<mat-spinner></mat-spinner>
</div>
</router-outlet>

custom.component.ts

import { LoaderService } from '../services/loader.service';

export class SurveyresultsComponent implements OnInit {

 constructor(private loaderService: LoaderService) { }

 ngOnInit() {
  //http call starts
  this.loaderService.display(true);
  //http call ends
  this.loaderService.display(false);
 }
}

Answer 1

我认为你是以错误的方式调用你的加载器服务。

您的加载程序代码逻辑是

this.loaderService.display(true);
//http call ends
this.loaderService.display(false);

用custom.component.ts编写，你的HTML代码用app.component.html

编写

尝试在custom.component.html中使用相同的HTML代码或尝试添加

ppm

app.component.ts中的这个逻辑，否则你可以在app.component.html中除了那个div之外打印showLoader值，如{{showLoader}}

Answer 2

看起来像是一个范围问题。必须有一个AppComponent实例可供订阅函数使用组件的变量。 'this'指的是订阅功能的范围。

export class AppComponent {
    //for the spinner
    showLoader: boolean;
    //LoaderService is for the spinner
    constructor(private loaderService: LoaderService) { }

    //for the spinner
     ngOnInit() {
         let self=this;

         this.loaderService.status.subscribe((val: boolean) => {
            self.showLoader = val;
         });
     }
}  

Answer 3

在Custom.component.ts类中，您在下面的2条语句中依次调用，而必须使用超时

ngOnInit() {
  //http call starts
  this.loaderService.display(true);
  //http call ends
  setTimeout(() => {
            this.loaderService.display(false);
          },5000);

 }

通过执行此块，微调器将显示5秒。

您还可以使用ngx-Spinner（https://www.youtube.com/watch?v=5wzn5HDq0rk&）