在路由解析器/路由更改上显示加载图标

Question

我试图在 route resolver 从数据库获取数据时显示加载图标。

我试过以下选项：

根组件：

_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:

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

加载图标根本不显示。

每次路由更改时，控制台日志中都会显示以下内容：

更新：

以下是应用以下更改后的输出：

 public loading: boolean = true;

 console.log(routerEvent);

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

更新二：

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

尝试使用此代码在路由解析器从数据库获取数据时显示加载图标：

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

Answer 2

我遇到过类似的情况，我通过以下方式解决了：

  public loading = true;

  constructor(private router: Router) {

  }

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

我以编程方式管理导航。我在开始导航之前将加载变量设置为 true，并在路由完成后将其值切换为 false。

Answer 3

这里的问题很简单，但是很容易漏掉。你没有正确地检查路由器事件类型，它应该是这样的：

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

你拥有它的方式总是返回 true 因为你的第二个子句基本上是 "or if NavigationCancel is truthy"，它是定义的，因为它是一个现有类型。因此，当路由解析开始时，loading 立即设置为 false，因为在 NavigationEnd 事件之前有很多中间路由器事件，并且由于您检查的方式，所有这些事件都设置为 false。

笨蛋：https://plnkr.co/edit/7UKVqKlRY0EPXNkx0qxH?p=preview

在路由解析器/路由更改上显示加载图标

Display Loading Icon on Route Resolver / Route Change

javascript

typescript

angular

angular5