在 Route Resolver / Route Change 上显示加载图标答案

【问题标题】：Display Loading Icon on Route Resolver / Route Change在 Route Resolver / Route Change 上显示加载图标
【发布时间】：2018-01-05 12:18:14
【问题描述】：

我试图在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);

更新 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
  });

 }

}

【问题讨论】：

能否初始化public loading: boolean = true，而不是在NavigationStart 中将其设置为true？另一个建议：将loading 设为属性并将console.log("loading is ", value) 放入setter 中，以查看其值是否在适当时更改。
还有一个建议：将console.log(routerEvent)放在回调的开头，看看你是否捕获了所有适当的事件。
@ConnorsFan 感谢 cmets。我已经应用了您提供的建议。不幸的是仍然没有运气。有关详细信息，请参阅我更新的问题。
我的猜测是您的本地服务器对数据的响应速度太快了。尝试通过将 .delay(3000) 放入可观察到的解析来人为地减慢它。
@bryan60 我的朋友还是不走运。刚试过你的建议。这个真的很吸引我。

标签： javascript angular typescript angular5

【解决方案1】：

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

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

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

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

【讨论】：

我不敢相信我是怎么错过的。有时是简单的事情让你发疯。感谢帮助的朋友。真的很欣赏它。 p.s 由于某种原因，我必须等待 3 小时才能获得赏金。我会尽快做的。
这是事实，在我身上发生了无数次，而这一点真的很容易被忽视，一开始包括我在内的 4-5 名开发者都错过了它。我什至没有意识到这一点，直到我开始在 plunkr 中记录所有将加载设置为 false 的路由器事件，并意识到除了 start 之外的每个路由器事件都将其设置为 false，然后检查了子句，它击中了我。很高兴能提供帮助。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

  public loading = true;

  constructor(private router: Router) {

  }

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

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

【讨论】：