Bagaimanakah Saya Boleh Memaparkan Skrin Memuatkan Semasa Perubahan Laluan dalam Sudut 2?

Memaparkan Skrin Pemuatan Semasa Perubahan Laluan dalam Sudut 2

Dalam Sudut 2, menavigasi antara laluan boleh mencetuskan paparan skrin pemuatan, memberikan petunjuk visual bahawa aplikasi sedang beralih.

Menggunakan Navigasi Acara

Penghala Sudut menawarkan Acara Navigasi yang menjejaki kemajuan perubahan laluan. Dengan melanggan acara ini, anda boleh memanipulasi UI dengan sewajarnya, termasuk menunjukkan skrin pemuatan. Begini caranya:

app.component.ts (Root Component)

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 (Root View)

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

Prestasi Peningkatan

Untuk prestasi yang lebih baik, manfaatkan NgZone dan Renderer Angular untuk mengawal keterlihatan skrin pemuatan. Ini memintas pengesanan perubahan, menghasilkan peralihan animasi yang lebih lancar:

app.component.ts (Komponen Root Dikemas Kini)

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 (Pandangan Akar yang dikemas kini)

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

Dengan melaksanakan teknik ini, anda boleh mengurus keterlihatan skrin pemuatan dengan berkesan semasa navigasi laluan dalam Angular 2, meningkatkan pengalaman pengguna dengan maklum balas visual yang jelas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Skrin Memuatkan Semasa Perubahan Laluan dalam Sudut 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!