如何在 Angular 中的路线转换期间实现加载屏幕？

在 Angular 2 中的路由转换期间显示加载屏幕

Angular Router 提供导航事件，使您能够监视更改并相应地修改 UI。这些事件包括 NavigationStart、NavigationEnd、NavigationCancel 和 NavigationError。

使用导航事件

要在路线更改期间显示加载屏幕，您可以在根组件（通常是应用程序）中订阅这些导航事件.component.ts) 并根据触发的特定事件切换加载 UI。

首先，从@angular/router 并在根组件中定义一个布尔标志，loading。

import {
  Router,
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {
  loading = true; // Initializing to true to show loading spinner on first load
  constructor(private router: Router) {
    this.router.events.subscribe((e : RouterEvent) => {
       this.navigationInterceptor(e);
     })
  }
}

在 navigationInterceptor 方法中，您可以监听 NavigationStart、NavigationEnd、NavigationCancel 和 NavigationError 事件并切换加载标志基于每个事件。

  // 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;
    }
    if (event instanceof NavigationCancel) {
      this.loading = false;
    }
    if (event instanceof NavigationError) {
      this.loading = false;
    }
  }

在根模板中，您可以使用条件渲染来根据加载显示加载叠加层标志的状态。

<div>
<p>通过遵循此方法，您可以在 Angular 2 应用程序中的路线转换期间有效地显示加载屏幕。</p>
<h3 id="性能优化">性能优化</h3>
<p>如果性能为一个问题，您可以利用 NgZone 和 Renderer 来增强加载微调器的性能，如更新的代码片段所示如下：</p>
<pre class="brush:php;toolbar:false">private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }
    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // 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._hideSpinner()
    }
    if (event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }

此技术在更新微调器的不透明度时绕过 Angular 的更改检测机制，从而实现更平滑的过渡。