角4旋转器

Question

如果有人可以帮我解决这个问题，我希望微调器在充电时出现，目前它不起作用，是否有人知道我可以改进什么开始？ Angular 4

 import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {

  isLoading: Boolean = false;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((routerEvent: Event) => this.checkRouterEvent(routerEvent));
  }

  public checkRouterEvent(routerEvent: Event) {
    if (routerEvent instanceof NavigationStart) {
      this.isLoading = true;
      console.log('true');
    } else if (routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationError) {
      this.isLoading = false;
      console.log('false');
    }
  }

}

<div *ngIf="isLoading" id="preloader">
  <div id="loader"></div>
</div>

Answer 1

如果要在加载时显示微调器，则应更改html / component

中的条件

<div *ngIf="!isLoading" id="preloader">
  <div id="loader"></div>
</div>

或

isLoading: Boolean = true;

public checkRouterEvent(routerEvent: Event) {
    if (routerEvent instanceof NavigationStart) {
      this.isLoading = false;
      console.log('true');
    } else if (routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationError) {
      this.isLoading = false;
      console.log('false');
    }
  }

这样旋转器将在开始时显示，并且在响应时它将消失。