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

Tunjukkan Skrin Pemuatan Semasa Menavigasi Laluan dalam Sudut 2

Dalam Sudut 2, memaparkan skrin pemuatan semasa peralihan laluan berguna untuk memberikan maklum balas pengguna dan meningkatkan prestasi yang dirasakan aplikasi . Ini boleh dicapai dengan menggunakan Peristiwa Navigasi yang disediakan oleh Penghala Sudut.

Penyelesaian yang disediakan melibatkan melanggan acara ini dan membuat perubahan UI yang sesuai. Walau bagaimanapun, adalah penting untuk mempertimbangkan acara tambahan seperti NavigationCancel dan NavigationError untuk menghentikan pemutar sekiranya peralihan gagal. Berikut ialah pelaksanaan dalam sistem komponen TypeScript Angular 2:

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

@Component({})
export class AppComponent {

  loading = true;

  constructor(private router: Router) {
    this.router.events.subscribe(e => {
      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;
    }
  }
}

Untuk paparan yang sepadan, tambah elemen pemutar dan paparkan secara bersyarat menggunakan arahan *ngIf:

<div class="loading-overlay" *ngIf="loading">
  <md-progress-bar mode="indeterminate"></md-progress-bar>
</div>

Untuk pengoptimuman prestasi , pertimbangkan untuk memanfaatkan Angular NgZone dan Renderer untuk menogol keterlihatan elemen pemutar, yang memintas perubahan pengesanan:

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

@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) {
      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'
      );
    })
  }
}

Dalam paparan yang sepadan, gunakan rujukan terus kepada elemen:

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

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