Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Melaksanakan Skrin Memuatkan Semasa Peralihan Laluan dalam Sudut 2?

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

DDD
Lepaskan: 2024-12-06 20:38:12
asal
479 orang telah melayarinya

How to Implement a Loading Screen During Route Transitions in Angular 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'
      )
    })
  }
}
Salin selepas log masuk

HTML

<div class="loading-overlay" #spinnerElement>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan