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

如何在 Angular 2 中进行路由时显示加载屏幕

在路由之间的转换期间显示加载屏幕可通过提供视觉反馈来增强用户体验。 Angular 2 提供了管理此类转换的内置支持。

实现加载屏幕的关键是订阅 Angular 的 RouterEvents。这些事件提供有关导航过程当前状态的信息。

改进了答案以增强性能

为了获得更好的性能，请考虑避免 ngIf加载微调器的条件显示。相反，利用 NgZone 和 Renderer 在 Angular 的更改检测周期之外切换微调器的可见性。

@Component({})
export class AppComponent {

  @ViewChild('spinnerElement') spinnerElement: ElementRef

  constructor(private router: Router,
              private ngZone: NgZone,
              private renderer: Renderer) {
    router.events.subscribe(this._navigationInterceptor)
  }

  private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      // Show spinner outside Angular's zone to prevent change detection
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }

    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // Hide spinner in case of failure
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    // Hide spinner outside Angular's zone to prevent change detection
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }
}

HTML

<div class="loading-overlay" #spinnerElement>

通过订阅 RouterEvents 并有条件地显示在变化检测之外加载微调器，您可以获得更流畅、响应更灵敏的导航体验。

以上是如何在 Angular 2 中的路由转换期间实现加载屏幕？的详细内容。更多信息请关注PHP中文网其他相关文章！