Bagaimana untuk Melaksanakan Skrin Memuatkan Semasa Peralihan Laluan dalam Sudut 2?

Cara Memaparkan Skrin Memuatkan Semasa Menghala dalam Sudut 2

Memaparkan skrin pemuatan semasa peralihan antara laluan meningkatkan pengalaman pengguna dengan memberikan maklum balas visual. Angular 2 menawarkan sokongan terbina dalam untuk mengurus peralihan sedemikian.

Kunci untuk melaksanakan skrin pemuatan adalah dengan melanggan Angular's RouterEvents. Peristiwa ini memberikan maklumat tentang keadaan semasa proses navigasi.

Jawapan Yang Dipertingkatkan untuk Prestasi Dipertingkat

Untuk prestasi yang lebih baik, pertimbangkan untuk mengelakkan ngIf untuk paparan bersyarat pemutar pemuatan. Sebaliknya, manfaatkan NgZone dan Renderer untuk menogol keterlihatan pemutar di luar kitaran pengesanan perubahan 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>

Dengan melanggan RouterEvents dan memaparkan secara bersyarat memuatkan pemutar di luar pengesanan perubahan, anda boleh mencapai navigasi yang lebih lancar dan responsif pengalaman.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Skrin Memuatkan Semasa Peralihan Laluan dalam Sudut 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!