如何在 Angular 2 中的路线更改期间显示加载屏幕？

在 Angular 2 中的路线更改期间显示加载屏幕

在 Angular 2 中，在路线之间导航可以触发加载屏幕的显示，提供应用程序正在运行的视觉指示

使用导航事件

Angular Router 提供了跟踪路线更改进度的导航事件。通过订阅这些事件，您可以相应地操作 UI，包括显示加载屏幕。操作方法如下：

app.component.ts（根组件）

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

@Component({/* ... */})
export class AppComponent {

  // Initialize loading indicator
  loading = true;

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

  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      this.loading = false;
    }
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this.loading = false;
    }
  }
}

app.component.html（根视图）

<div class="loading-overlay" *ngIf="loading">
  <!-- Show loading animation, e.g., spinner -->
</div>

性能增强

为了提高性能，请利用 Angular 的 NgZone 和 Renderer 来控制加载屏幕的可见性。这会绕过更改检测，从而实现更平滑的动画过渡：

app.component.ts（更新的根组件）

import { NgZone, Renderer, ElementRef, ViewChild } from '@angular/core';

@Component({/* ... */})
export class AppComponent {

  @ViewChild('spinnerElement')
  spinnerElement: ElementRef;

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

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

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

app.component.html （更新的根视图）

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

通过实施这些技术，您可以在 Angular 2 中的路线导航期间有效管理加载屏幕的可见性，通过清晰的视觉反馈增强用户体验。

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