Angular 5：启动请求懒加载路由/模块时如何显示加载Spinner？

我完全懂你这个痛点！把加载Spinner直接写在<app-root>标签里确实是个快速实现的方案，平时正常路由跳转时都能顺畅工作，但一旦启动时直接访问懒加载路由的路径，就会出现Spinner显示后“失控”的情况——要么一直转停不下来，要么加载完成后没被正确移除，对吧？

问题根源 #

这是因为当直接访问懒加载路由时，Angular启动初期会先渲染<app-root>里的Spinner，但懒加载模块的加载是异步的，而原来的Spinner逻辑通常只绑定了根组件的初始化流程，没考虑到懒加载模块启动时的生命周期脱节：根组件还没完全初始化完成，懒加载路由的请求就已经在处理了，导致Spinner的控制逻辑跟懒加载的状态变化没衔接上。

下面给你两个靠谱的解决方案，按需选择：

方案一：全局手动控制Spinner（适合简单场景） #

这个方案把Spinner放在<app-root>外面，直接通过Angular的启动钩子来控制显示隐藏，完美覆盖懒加载路由启动的场景：

1. 在index.html里放Spinner，脱离<app-root>的控制：

<body>
  <!-- 全局Spinner -->
  <div id="app-loader" class="spinner-container">
    <div class="spinner"></div>
  </div>
  <app-root></app-root>
</body>

2. 在main.ts里控制Spinner的显示隐藏：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 启动前先显示Spinner
document.getElementById('app-loader')?.classList.remove('hidden');

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    // Angular初始化完成（包括懒加载模块加载）后隐藏Spinner
    document.getElementById('app-loader')?.classList.add('hidden');
  })
  .catch(err => {
    console.error(err);
    // 初始化失败也记得隐藏Spinner，避免卡死
    document.getElementById('app-loader')?.classList.add('hidden');
  });

3. 给Spinner加全局样式（避免组件样式隔离影响）：

.spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ddd;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.hidden {
  display: none !important;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

方案二：用路由守卫+全局服务控制（更灵活的场景） #

如果需要在路由切换时也能控制Spinner，这个方案更适合，能精准监听懒加载模块的加载状态：

1. 创建Spinner全局服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SpinnerService {
  private _isLoading$ = new BehaviorSubject<boolean>(false);
  isLoading$ = this._isLoading$.asObservable();

  show() {
    this._isLoading$.next(true);
  }

  hide() {
    this._isLoading$.next(false);
  }
}

2. 创建懒加载路由守卫：

import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment } from '@angular/router';
import { Observable } from 'rxjs';
import { SpinnerService } from './spinner.service';

@Injectable({ providedIn: 'root' })
export class LazyLoadSpinnerGuard implements CanLoad {
  constructor(private spinnerService: SpinnerService) {}

  canLoad(
    route: Route,
    segments: UrlSegment[]
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 开始加载懒加载模块时显示Spinner
    this.spinnerService.show();
    // 返回Promise等待模块加载完成，再隐藏Spinner
    return new Promise(resolve => {
      // 这里不需要手动延时，模块加载完成后resolve会自动触发
      resolve(true);
      setTimeout(() => {
        this.spinnerService.hide();
      }, 300); // 加个小延时避免Spinner闪一下
    });
  }
}

3. 在路由配置中添加守卫：

const routes: Routes = [
  {
    path: 'lazy-page',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
    canLoad: [LazyLoadSpinnerGuard] // 给懒加载路由加守卫
  }
];

4. 在根组件中渲染Spinner：

<!-- 根组件模板 -->
<div *ngIf="spinnerService.isLoading$ | async" class="spinner-container">
  <div class="spinner"></div>
</div>
<router-outlet></router-outlet>

// 根组件类
import { SpinnerService } from './services/spinner.service';

constructor(public spinnerService: SpinnerService) {}

额外小技巧 #

如果想让普通路由切换时也显示Spinner，可以在根组件里监听路由事件：

import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router, private spinnerService: SpinnerService) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationStart || event instanceof NavigationEnd)
  ).subscribe(event => {
    if (event instanceof NavigationStart) {
      this.spinnerService.show();
    } else if (event instanceof NavigationEnd) {
      this.spinnerService.hide();
    }
  });
}

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