Bagaimana untuk Melaksanakan Skrin Memuatkan Semasa Navigasi Laluan dalam Sudut 2?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-12-11 07:05:14

asal

203 orang telah melayarinya

How to Implement Loading Screens During Route Navigation in Angular 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;
    }
  }
}

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

Dalam paparan yang sepadan, gunakan rujukan terus kepada elemen:

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

Salin selepas log masuk

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!