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

Tunjukkan Skrin Pemuatan Semasa Menavigasi Antara Laluan dalam Sudut 2

Keperluan biasa dalam aplikasi Sudut ialah memaparkan skrin pemuatan atau penunjuk semasa menavigasi antara laluan. Dengan memanfaatkan Acara Navigasi yang disediakan oleh Penghala Angular, kami boleh menogol keterlihatan skrin pemuatan mengikut keadaan navigasi.

Menggunakan Langganan untuk Acara Navigasi:

Dalam akar AppComponent, melanggan acara penghala. Apabila peristiwa NavigationStart berlaku, paparkan skrin pemuatan. Apabila acara NavigationEnd dipancarkan, sembunyikan skrin pemuatan. Selain itu, kendalikan peristiwa NavigationCancel dan NavigationError untuk memastikan skrin pemuatan disembunyikan sekiranya peralihan laluan gagal.

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

@Component({ /* ... */ })
export class AppComponent {

    loading = true;

    constructor(private router: Router) {
        this.router.events.subscribe((event: Event) => {
            this.navigationInterceptor(event);
        });
    }

    navigationInterceptor(event: Event): void {
        if (event instanceof NavigationStart) {
            this.loading = true;
        }
        else if (event instanceof NavigationEnd) {
            this.loading = false;
        }
    }

}

Dalam templat komponen akar, paparkan skrin pemuatan menggunakan arahan *ngIf.

<div *ngIf="loading" class="loading-overlay">
    <!-- Add your loading indicator here -->
</div>

Pengoptimuman Prestasi:

Untuk lebih baik prestasi, keupayaan NgZone dan Renderer Angular boleh dimanfaatkan dan bukannya arahan *ngIf. Ini mengelakkan mekanisme pengesanan perubahan Angular apabila mengemas kini keterlihatan pemutar.

@ViewChild('spinnerElement') spinnerElement: ElementRef;

constructor(private router: Router,
            private ngZone: NgZone,
            private renderer: Renderer) {
    router.events.subscribe(this._navigationInterceptor);
}

private _navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
        this.ngZone.runOutsideAngular(() => {
            this.renderer.setElementStyle(this.spinnerElement.nativeElement, 'opacity', '1');
        });
    }
    else if (event instanceof NavigationEnd) {
        this._hideSpinner();
    }
}

private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(this.spinnerElement.nativeElement, 'opacity', '0');
    });
}

Dalam templat komponen akar, alih keluar arahan *ngIf dan rujuk terus elemen pemutar.

<div #spinnerElement>

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