Búsqueda de sitios web

javascript - Mostrar icono de carga en el resolutor de rutas/cambio de ruta

Estoy tratando de mostrar un ícono de carga mientras el resolutor de ruta obtiene los datos de la base de datos.

He probado la opción siguiente:

Componente Raíz:

_router.events.subscribe((routerEvent: RouterEvent) => {

   if (routerEvent instanceof NavigationStart) {
      console.log("start");
      this.loading = true;

   } else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
    console.log("end");
    this.loading = false;
  }

});

Componente Raíz HTML:

<h1 *ngIf="loading">Loading</h1>

El icono de carga no se muestra en absoluto.

Lo siguiente se muestra en el registro de la consola en cada cambio de ruta:

Actualización:

A continuación se muestra el resultado después de aplicar los siguientes cambios:

 public loading: boolean = true;

 console.log(routerEvent);

 console.log("Loading is " + this.loading);

Actualización 2:

app.component.html:

<div class="uk-offcanvas-content">
  <h1>{{loading}}</h1>
  <h1 *ngIf="loading">Loading</h1>

  <app-root-nav></app-root-nav>

  <app-notifications></app-notifications>

  <router-outlet></router-outlet> 
</div>

app.component.ts:

import {Component, OnInit, AfterViewInit} from '@angular/core';
import {AuthenticationService} from "../../authentication/services/authentication.service";
import {Router, Event, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from "@angular/router";

import {RouterEvent} from "@angular/router";
import UIkit from 'uikit'

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })

 export class AppComponent implements OnInit, AfterViewInit {

  isLoggedIn: boolean;
  public loading: boolean = true;
  UIkit: any;

  constructor(private _router: Router, private _authService: AuthenticationService) {

  _router.events.subscribe((routerEvent: RouterEvent) => {
    if (routerEvent instanceof NavigationStart) {

      this.loading = true;
      console.log(routerEvent);
      console.log("Loading is " + this.loading);

  } else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {

    this.loading = false;
  }
});
}

ngAfterViewInit() {
}

ngOnInit() {

  UIkit.notification({
    message: 'my-message!',
    status: 'primary',
    pos: 'top-right',
    timeout: 5000
  });

 }

}

Respuesta #1

El problema aquí es bastante simple pero fácil de pasar por alto. Estás comprobando incorrectamente el tipo de evento del enrutador, debería ser así:

else if (routerEvent instanceof NavigationError || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationEnd)

la forma en que lo tienes solo devuelve verdadero siempre porque tu segunda cláusula es básicamente "o si NavigationCancel es verdadero", lo cual lo es por definición ya que es un tipo existente. entonces loading se establece en falso inmediatamente cuando comienza la resolución de la ruta, ya que hay muchos eventos intermedios del enrutador antes del evento NavigationEnd y se establece en falso en todos ellos debido a la forma en que estás verificando.

plunk: https://plnkr.co/edit/7UKVqKlRY0EPXNkx0qxH?p=preview

Respuesta #2

Prueba este código para mostrar un ícono de carga mientras el resolvedor de rutas obtiene los datos de la base de datos:

 constructor(private router: Router){
          router.events.subscribe(e => {
                if (e instanceof ChildActivationStart) {
                      this.loaderservice.show();
                 } else if (e instanceof ChildActivationEnd) {
                      this.loaderservice.hide();
                  }
         });
    }

Artículos relacionados