javascript - 加载组件时出现角度加载拦截器错误

问题描述

我有一个组件，如果我删除我的加载器，它就可以工作。启动我的组件时，我有一个 forkJoin 来调用 2 个端点，但是在放置 loader 时，它无法识别我的 forkJoin，如果我删除了 loader，它将正常工作。此错误仅在调用我的 MachineComponent 时出现，在我的 MasterComponent 中呈现的所有其他组件正常工作。你能帮助我吗？

错误

我的代码：

MasterPageComponent.html 和 TS

<div class="wrapper default-theme" [ngClass]="getClasses()">
  <app-navbar></app-navbar>
  <main>
    <app-sidebar></app-sidebar>
    <div class="pages container-fluid pt-4 pb-4 pl-4 pr-4 ">
      <router-outlet></router-outlet>
    </div>
    <div class="overlay" (click)="toggleSidebar()"></div>
  </main>
</div>
<app-loading *ngIf="loader.isLoading | async"></app-loading>

export class MasterPageComponent implements OnInit {

  constructor(private el: ElementService, 
    public loader: LoaderService, 
    private _changeDetectionRef: ChangeDetectorRef) { }

  ngOnInit(): void {}
  
  ngAfterViewChecked() : void {
    this._changeDetectionRef.detectChanges();
}


  getClasses() {
    const classes = {
      'pinned-sidebar': this.el.getSidebarStat().isSidebarPinned,
      'toggeled-sidebar': this.el.getSidebarStat().isSidebarToggeled
    }
    return classes;
  }
  toggleSidebar() {
    this.el.toggleSidebar();
  }

}

我的 MachineComponent.html 和 TS

import "rxjs/add/operator/takeWhile";

export class MachinesComponent implements OnInit, OnDestroy, AfterViewInit {

  public selectedServer: any;
  public selectedMachine: any;
  public flavors: any[] = [];
  public machines: any[] = [];
  private alive: boolean = true;
  public form: FormGroup;

  constructor(private serverService: MachineService, 
    private openstackService: OpenStackService,
    private modalService: NgbModal, 
    private alert: AlertService,
    private formBuilder: FormBuilder,
  ) {}

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      flavorRef: new FormControl('')
    })

    forkJoin(this.serverService.getServer(), 
    this.openstackService.getFlavors())
    .takeWhile(() => this.alive)
    .subscribe((data) => {
      this.machines = data[0];
      this.flavors = data[1]['flavors'];
    })

    this.setExpanded();

  }

我的装载机拦截器：

export class LoaderInterceptor implements HttpInterceptor  {
  private requests: HttpRequest<any>[] = [];

  constructor(private loader: LoaderService) {}

  removeRequest(req: HttpRequest<any>) {
    const i = this.requests.indexOf(req);
    if (i >= 0) {
      this.requests.splice(i, 1);
    }
    console.log(i, this.requests.length);
    this.loader.isLoading.next(this.requests.length > 0);
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.requests.push(req);
    this.loader.isLoading.next(true);
    return Observable.create(observer => {
      const subscription = next.handle(req)
        .subscribe(
        event => {
          if (event instanceof HttpResponse) {
            this.removeRequest(req);
            observer.next(event);
          }
        },
        err => { this.removeRequest(req); observer.error(err); },
        () => { this.removeRequest(req); observer.complete(); });
      // teardown logic in case of cancelled requests
      return () => {
        this.removeRequest(req);
        subscription.unsubscribe();
      };
    });
  }
}

我的装载机拦截器服务：

@Injectable()
export class LoaderService {
    public isLoading = new BehaviorSubject(false);

    constructor(){}
}

标签： javascriptangular

forkJoin(this.serverService.getServer(), this.openstackService.getFlavors()) .pipe(takeWhile(() => this.alive)) .subscribe((data) => { this.machines = data[0]; this.flavors = data[1]['flavors']; })

javascript - 加载组件时出现角度加载拦截器错误

问题描述

解决方案

推荐阅读