Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Memaparkan Skrin Memuatkan Semasa Perubahan Laluan dalam Sudut 2?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-09 21:44:15696semak imbas

How Can I Display a Loading Screen During Route Changes in Angular 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn