Mi escenario es el siguiente. Tengo un menú, con múltiples opciones. Cada menú debe mostrarse según los permisos del usuario (ya resuelto), la mayoría de los elementos del menú están encapsulados como módulos y la mayoría de los módulos tienen carga diferida, por lo que cuando un usuario hace clic en un elemento del menú por primera vez, se carga (hasta aquí todo funciona bien), ahora mi requisito es, para brindar una mejor experiencia al usuario, necesito mostrar el indicador de actividad después de que el usuario haga clic en un elemento del menú mientras se carga el módulo de carga diferida.
Hasta ahora, intenté usar las interfaces canActive, canLoad, canActivateChild de Angular Router pero sin suerte.
¿Algunas ideas?
Puede escuchar dos eventos del enrutador:
RouteConfigLoadStartRouteConfigLoadEnd Se disparan cuando se está cargando un módulo con carga diferida. La ventaja de usarlos sobre los eventos de enrutador estándar, como NavigationStart , es que no se activarán en cada cambio de ruta.
Escúchelos en su AppComponent raíz para mostrar/ocultar su rueda giratoria.
aplicación.componente.ts
import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router'; ... export class AppComponent implements OnInit { loadingRouteConfig: boolean; constructor (private router: Router) {} ngOnInit () { this.router.events.subscribe(event => { if (event instanceof RouteConfigLoadStart) { this.loadingRouteConfig = true; } else if (event instanceof RouteConfigLoadEnd) { this.loadingRouteConfig = false; } }); } }aplicación.componente.html
Solo una cadena simple aquí, pero podría usar un componente giratorio.
<router-outlet></router-outlet> <ng-container *ngIf="loadingRouteConfig">Loading route config...</ng-container>Estoy usando este enfoque con Angular v4.2.3
puedes hacerlo así
<div class="main-loader" *ngIf="loading"> <div class="cssload-container" > <div class="cssload-whirlpool"></div> </div> </div>
en app.component.ts
import { Router, NavigationStart, NavigationEnd } from '@angular/router'; loading:boolean = false; constructor(private router:Router) { router.events.subscribe(event => { if(event instanceof NavigationStart) { this.loading = true; console.log("event started") }else if(event instanceof NavigationEnd) { this.loading = false; console.log("event end") } // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized }); }en css cualquier animación de carga
Espero que esto sea útil para ti. Gracias
¡Puedes usar CSS!
<routler-outlet></routler-outlet> <div class='.loader> Just, wait a sec ! I'm loading </div>en tu plantilla
router-outlet + .loader { opacity : 1; } .loader { opacity : 0; }Entonces puedes crear elegantes spinners con HTML/CSS