Question

我很困惑一个问题。我的应用从异步函数获取答案时，我需要显示加载程序微调器。为了解决此任务，我从 app.component 中粘贴了加载器组件，如下所示：

<div class="sticky-top">  
  <app-menu></app-menu>
</div>

<div>
  <router-outlet></router-outlet>
</div> 

<!-- Loader-->
<div *ngIf=" isShowIndicator" class="position">
  <app-loader > </app-loader> 
</div>

如果isShowIndicator（布尔值）为true，则为假-正确显示加载程序-加载程序消失。

但是我需要更改此变量的值，因此我尝试在app.component.ts文件中进行三次尝试，所有这些尝试都是更改isShowIndicator的值，但未出现加载程序。您能解释一下为什么会这样吗？谢谢。

app.component.ts的代码是：

import { Component, ChangeDetectorRef } from '@angular/core';
import { LoaderService } from './services/additional/loader';
import { Router, RouterModule, NavigationStart, NavigationEnd, RouterEvent, Event } from '@angular/router';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  isShowIndicator: boolean = true;

  constructor(private _router: Router, private loader: LoaderService, public cd: ChangeDetectorRef) {
// first attempt - use the Observable from my loader service: 
    this.GetLoadingState().subscribe(element => {
      console.log("Show Indicator Obsrvable " + `${element}`);
      this.isShowIndicator = element;
      console.log("Show Indicator Obsrvable " + this.isShowIndicator);
    })
// second attempt - use router events to change the value of isShowIndicator
    this._router.events.subscribe((routerEvent: Event) => {
      if (routerEvent instanceof NavigationStart) {

        this.isShowIndicator = true;
        console.log("true from route " + this.isShowIndicator);
      }

      else if (routerEvent instanceof NavigationEnd) {
        console.log("false from route " + this.isShowIndicator);
        this.isShowIndicator = false;
      }
    });
// third attempt is use the behavior subject object 
    this.loader.ShowIndicator.subscribe(element => {
      console.log("Show Indicator " + `${element}`);
      this.isShowIndicator = element;
      console.log("Show Indicator " + this.isShowIndicator);
    });
  }

  GetLoadingState(): Observable<boolean> {

    return this.loader.ShowIndicator.asObservable();

  }
}

加载程序服务是这样实现的：

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

@Injectable({
  providedIn: 'root'
})
export class LoaderService {

    public ShowIndicator: BehaviorSubject<boolean> =
    new BehaviorSubject<boolean>(true);

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

在我的代码中，我将这样的新值赋予了加载程序服务：

 constructor(private loader: LoaderService) {
    this.loader.display(true);
    //some async code
    this.loader.display(false); // inside the subscribe method of course
  }

Answer 1

如果通过HttpInterceptors解决此问题可能会更好。

类似这样的东西：

  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <div class="glavniDiv">
    <img src="https://technabob.com/blog/wp-content/uploads/2011/11/111711_rg_8BitHeroes_03.jpg">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

Reference

修改

在您的代码中

@Injectable({
  providedIn: 'root'
})
export class LoaderInterceptorService implements HttpInterceptor {
  constructor(private loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.showLoader();
    return next.handle(req).pipe(tap((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) {
        this.onEnd();
      }
    },
      (err: any) => {
        this.onEnd();
    }));
  }
  private onEnd(): void {
    this.hideLoader();
  }
  private showLoader(): void {
    this.loaderService.show();
  }
  private hideLoader(): void {
    this.loaderService.hide();
  }
}

您需要做的是

 constructor(private loader: LoaderService) {
    this.loader.display(true);
    //some async code
    this.loader.display(false); // inside the subscribe method of course
  }

用于显示加载程序的Angular的ngIF无法正常工作

1 个答案: