Angular路由切换时加载Spinner失效问题排查及实现方案咨询

你的问题核心在于加载指示器放在了HomePageComponent里——这个组件只有在访问首页时才会渲染，当你切换到其他路由时，HomePageComponent会被销毁，所以spinner根本不会出现在其他路由的切换过程中。

要实现全局路由切换时的加载屏，你需要把这个逻辑移到**根组件（AppComponent）**中，因为根组件是整个应用的外壳，路由切换时只会替换router-outlet内的内容，根组件始终存在。

下面是完整的修改方案：

1. 根组件HTML（app.component.html） #

把spinner和路由出口放在一起，确保全局可见：

<!-- 全局加载遮罩与Spinner -->
<div *ngIf="showLoadingIndicator" class="spinner-overlay">
  <div class="spinner"></div>
</div>

<!-- 应用路由出口 -->
<router-outlet></router-outlet>

2. 根组件TS（app.component.ts） #

将路由事件监听逻辑移到这里，确保全局监听路由状态：

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

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

  constructor(private router: Router) {
    this.router.events.subscribe((routerEvent: Event) => {
      switch (true) {
        case routerEvent instanceof NavigationStart:
          // 路由开始时显示加载器
          this.showLoadingIndicator = true;
          break;
        case routerEvent instanceof NavigationEnd:
        case routerEvent instanceof NavigationCancel:
        case routerEvent instanceof NavigationError:
          // 路由结束/取消/出错时隐藏加载器
          this.showLoadingIndicator = false;
          break;
        default:
          break;
      }
    });
  }
}

3. 优化后的CSS样式（app.component.scss） #

调整样式让加载屏更友好，覆盖全屏且层级最高：

/* 全屏遮罩，防止加载时操作页面 */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保在所有内容之上 */
}

.spinner {
  border: 16px solid #e0e0e0;
  border-top: 16px solid #337AB7;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

额外注意事项 #

• 如果你希望某些路由切换不显示加载器，可以在NavigationStart事件中判断routerEvent.url，添加过滤逻辑。
• 如果你的应用有异步路由加载（懒加载模块），这个方案同样适用，因为NavigationStart会在懒加载开始时触发，NavigationEnd会在模块加载完成后触发。

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