Angular路由解析/切换时加载图标不显示问题排查

我来帮你搞定这个问题！你当前的代码里藏着一个很容易踩坑的语法错误，这就是加载图标不显示的关键原因。

核心问题：条件判断逻辑错误 #

你在判断路由结束事件的时候，代码写成了这样：

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

这里的NavigationCancel和NavigationEnd没有使用instanceof routerEvent来判断，它们本身是构造函数，属于真值，所以这个条件会永远成立！也就是说，在NavigationStart触发后，这个else if会立刻执行，把loading设为false，所以你根本看不到加载提示。

修正后的代码 #

app.component.ts #

import { Component } from '@angular/core';
import { Router, RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loading = false;

  constructor(private router: Router) {
    this.router.events.subscribe((routerEvent: RouterEvent) => {
      if (routerEvent instanceof NavigationStart) {
        console.log("start");
        this.loading = true;
      } else if (routerEvent instanceof NavigationError || 
                 routerEvent instanceof NavigationCancel || 
                 routerEvent instanceof NavigationEnd) {
        console.log("end");
        this.loading = false;
      }
    });
  }
}

app.component.html #

<!-- 这里可以替换成你的加载图标组件 -->
<h1 *ngIf="loading">Loading...</h1>
<router-outlet></router-outlet>

额外提示：适配路由解析器场景 #

因为你是要在路由解析器从DB获取数据时显示加载状态，还要确保：

• 路由解析器的逻辑确实是在NavigationStart之后触发，NavigationEnd之前完成（Angular的路由解析器本身就是在导航过程中执行，完成后才会触发NavigationEnd）
• 如果你的初始loading设为true，记得在组件初始化时，若当前已经处于某个路由（比如页面刷新），要手动把loading设为false，避免一直显示加载状态

内容的提问来源于stack exchange，提问作者Skywalker