Route Relay / Route Relay Image Upload Icon

Question

I try to show the boot icon while I route resolver getting data from the DB.

I tried the option below:

The root component:

 _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; } }); 

HTML root component:

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

The download icon does not appear at all.

Each time you change a route, the following is displayed in the console log:

Update:

The following is the result after making the following changes:

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

Update 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 }); } } 

Answer 1

The problem here is quite simple, but easy to miss. you are incorrectly checking the type of router event, it should look like this:

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

the way you do this simply returns true always, because your second sentence is basically "or if the NavigationCancel is true", which is by definition, as it is an existing type. therefore, loading immediately sets the value to false when route resolution starts, since there are many intermediate router events before the NavigationEnd event, and it sets false for all due to what you check.

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

Answer 2

Try this code to show the download icon while the route recognizer gets data from the database:

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

Answer 3

I would have a similar situation, and I would have decided as follows:

  public loading = true; constructor(private router: Router) { } public onClick(): void { this.loading = true; this.router.navigate(['/test']).then(_ => { this.loading = false; }); } 

I controlled the navigation programmatically. I set the load variable to true before starting the navigation, and I will switch its value to false when the routing is complete.