如何在 angular 中的一条路线到另一条路线之间显示微调加载器 4，我正在处理事件但无法显示加载器

Question

我目前正在做一个项目，他们需要在两条路线之间安装装载机。我也收到了路线事件，但我看不到加载器

import { Component } from '@angular/core';
import {
Router,
// import as RouterEvent to avoid confusion with the DOM Event
Event,
NavigationStart,
NavigationEnd,
NavigationCancel,
NavigationError
} from '@angular/router'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'boroughmuir-init-map';

loading = true;

constructor(private router: Router) {
 router.events.subscribe((event: Event) => {
   this.navigationInterceptor(event)
 })
}

 // Shows and hides the loading spinner during RouterEvent changes
 navigationInterceptor(event: Event): void {
  if (event instanceof NavigationStart) {
     this.loading = true;
  }
  if (event instanceof NavigationEnd) {
  this.loading = false;
  }

  // Set loading state to false in both of the below events to hide the 
  spinner in case a request fails
   if (event instanceof NavigationCancel) {
    this.loading = false;
  }
  if (event instanceof NavigationError) {
    this.loading = false;
  }
}



}

app.component.html

  <div class="loader" *ngIf="loading"></div>
  <router-outlet></router-outlet>

请帮助我解决这个问题。我没有得到加载器，但我得到了控制台中的事件。

app.component.css

.loader {
border: 16px solid #BE9F58;
border-radius: 50%;
border-top: 16px solid #212529;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position:absolute;
top:50%;
left:calc(50% - 48px);
transform:translateX(-50%) translateY(-50%);
z-index: 1000;
  }

 /* Safari */
 @-webkit-keyframes spin {
   0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
 }

 @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }

加载器Css

Answer 1

导入部分只是一个小改动：

import { Component } from '@angular/core';
import {
Router,
// import as RouterEvent to avoid confusion with the DOM Event
Event as RouterEvent,
NavigationStart,
NavigationEnd,
NavigationCancel,
NavigationError
} from '@angular/router'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'boroughmuir-init-map';

loading = true;

constructor(private router: Router) {
 router.events.subscribe((event: RouterEvent) => {
   this.navigationInterceptor(event)
 })
}

 // Shows and hides the loading spinner during RouterEvent changes
 navigationInterceptor(event: RouterEvent): void {
  if (event instanceof NavigationStart) {
     this.loading = true;
  }
  if (event instanceof NavigationEnd) {
  this.loading = false;
  }

  // Set loading state to false in both of the below events to hide the 
  spinner in case a request fails
   if (event instanceof NavigationCancel) {
    this.loading = false;
  }
  if (event instanceof NavigationError) {
    this.loading = false;
  }
}

}

您尝试比较的事件必须是 RouterEvent 类型，而不仅仅是普通事件。希望对您有所帮助！

Answer 2

删除 NavigationCancel 和 NavigationError，如果您没有在您的应用程序中使用路线守卫，只有当您有路线守卫并且在导航期间 return false 时，您才会收到 NavigationCancel 事件。您可以通过在 routerModule

中传递 {enableTracing : true} 对象来检查

constructor(private router: Router) {
    router.events.subscribe((event: Event) => {
      this.navigationInterceptor(event);
    });
  }

  navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this.loader = true;
    }
    if (event instanceof NavigationEnd) {
      // Hide loading indicator
      this.timeout = setTimeout(() => {
        clearTimeout(this.timeout);
        this.loader = false;
      }, 1000);
    }
    // if (event instanceof NavigationCancel) {
    //   this.loader = false;
    // }
    // if (event instanceof NavigationError) {
    //    console.log(event);
    //   this.loader = false;
    // }

  }

示例：https://stackblitz.com/edit/angular-spinner-example-bcedjq

如何在 angular 中的一条路线到另一条路线之间显示微调加载器 4，我正在处理事件但无法显示加载器

How to show a spinner loader between the one route to another route in angular 4, I am geeting events but not able to show the loader

routing

routes

loader

angular