Angular 4加载Spinner不显示问题求助：如何实现加载时显示

我来帮你梳理下这个加载Spinner失效的可能原因，结合你的代码咱们逐一排查：

1. 确认路由事件订阅时机是否正确 #

你在ngOnInit里订阅router.events，但如果这个LoaderComponent是在初始路由完成后才挂载的，就会错过初始导航的NavigationStart事件。比如，如果你把<app-loader>放在某个子路由组件里，而不是根组件（比如AppComponent），那初始加载时的路由事件已经触发过了，订阅就不会生效。

解决建议：

• 把LoaderComponent放在根组件的模板中（确保它在应用启动时就被渲染）；
• 或者把订阅逻辑移到构造函数里，提前监听事件：

constructor(private router: Router) {
  this.router.events.subscribe((routerEvent: RouterEvent) => this.checkRouterEvent(routerEvent));
}

2. 验证Spinner的CSS样式是否生效 #

就算isLoading变为true，如果CSS样式没配置对，Spinner也可能看不到。比如你的#preloader和#loader需要设置定位、尺寸和动画：

/* 全屏覆盖的预加载层 */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* 确保在最上层 */
}

/* 旋转的Spinner动画 */
#loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

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

3. 检查路由事件是否真的触发 #

你代码里加了console.log('true')和console.log('false')，打开浏览器控制台，切换路由时看看有没有这些日志输出：

• 如果没有任何日志：说明LoaderComponent没有被正确挂载（比如没在模板里引用<app-loader>），或者router.events的订阅逻辑没执行；
• 如果只有false没有true：说明NavigationStart事件没被捕捉到，可能是路由配置的问题（比如同路由参数变化默认不触发导航事件）。

4. 处理同路由参数变化的场景 #

如果你的场景是同一路由下参数变化（比如从/user/1到/user/2），Angular默认不会触发NavigationStart事件。这时候需要：

• 在路由配置里设置onSameUrlNavigation: 'reload'：

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 或者单独监听路由参数的变化来控制Spinner显示。

5. 避免Spinner因导航过快闪屏 #

如果你的路由组件加载速度很快，NavigationStart和NavigationEnd会几乎同时触发，Spinner可能一闪而过，看起来像是没工作。可以给Spinner加个最小显示时间：

private loadingTimer: any;

public checkRouterEvent(routerEvent: RouterEvent) {
  if (routerEvent instanceof NavigationStart) {
    this.isLoading = true;
    // 确保Spinner至少显示300毫秒
    this.loadingTimer = setTimeout(() => {}, 300);
    console.log('true');
  } else if (routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationError) {
    clearTimeout(this.loadingTimer);
    // 延迟隐藏，避免闪屏
    setTimeout(() => {
      this.isLoading = false;
      console.log('false');
    }, 100);
  }
}

6. 确认变更检测是否正常 #

虽然Angular默认会处理变更检测，但有时候异步操作可能导致视图没更新。可以手动触发变更检测来排除这个问题：

• 首先导入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

• 构造函数注入并调用：

constructor(private router: Router, private cdr: ChangeDetectorRef) { }

public checkRouterEvent(routerEvent: RouterEvent) {
  if (routerEvent instanceof NavigationStart) {
    this.isLoading = true;
    this.cdr.detectChanges(); // 手动触发变更检测
    console.log('true');
  } else if (routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationError) {
    this.isLoading = false;
    this.cdr.detectChanges();
    console.log('false');
  }
}

你可以按照上面的顺序一步步排查，先从最简单的「检查控制台日志」和「验证CSS样式」开始，大部分问题都能在这里找到原因。

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