Bagaimana untuk Melaksanakan Skrin Memuatkan Semasa Peralihan Laluan dalam Sudut?

Memaparkan Skrin Memuatkan Semasa Peralihan Laluan dalam Sudut 2

Penghala Sudut menawarkan Acara Navigasi yang membolehkan anda memantau perubahan dan mengubah suai UI dengan sewajarnya. Acara ini termasuk NavigationStart, NavigationEnd, NavigationCancel dan NavigationError.

Menggunakan Acara Navigasi

Untuk memaparkan skrin pemuatan semasa perubahan laluan, anda boleh melanggan Acara Navigasi ini dalam komponen akar anda (biasanya apl .component.ts) dan togol UI pemuatan berdasarkan acara tertentu dicetuskan.

Mula-mula, import kelas berkaitan acara yang diperlukan daripada @angular/router dan tentukan bendera boolean, memuatkan, dalam komponen akar anda.

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);
     })
  }
}

Dalam kaedah navigationInterceptor, anda boleh mendengar acara NavigationStart, NavigationEnd, NavigationCancel dan NavigationError dan togol pemuatan bendera berdasarkan setiap acara.

  // 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;
    }
  }

Dalam templat akar anda, anda kemudian boleh menggunakan pemaparan bersyarat untuk memaparkan tindanan pemuatan berdasarkan keadaan bendera pemuatan.

<div>
<p>Dengan mengikuti ini pendekatan, anda boleh memaparkan skrin pemuatan dengan berkesan semasa peralihan laluan dalam aplikasi Angular 2 anda.</p>
<h3 id="Prestasi-Pengoptimuman">Prestasi Pengoptimuman</h3>
<p>Jika prestasi membimbangkan, anda boleh memanfaatkan NgZone dan Renderer untuk meningkatkan prestasi pemutar pemuatan, seperti yang ditunjukkan dalam coretan kod yang dikemas kini di bawah:</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'
      )
    })
  }

Teknik ini memintas pengesanan perubahan Angular mekanisme apabila mengemas kini kelegapan pemutar, menghasilkan peralihan yang lebih lancar.