PrimeNG 14：模块中Resolver等待时如何显示进度加载器？

针对你用PrimeNG 14+懒加载模块+Resolver的场景，有几个实用的加载器放置方案，按推荐优先级排序：

方案1：全局根组件（AppComponent）放置（推荐） #

Resolver是在路由激活前执行的，此时目标组件还未初始化，所以把加载器放在全局根组件里是最稳妥的方式，能覆盖所有路由导航（包括懒加载模块的Resolver阶段）。

步骤1：修改AppComponent模板 #

添加进度加载器，用*ngIf控制显示状态：

<!-- 全局加载器，固定在屏幕中央，加半透明背景遮罩 -->
<p-progressSpinner 
  *ngIf="isLoading" 
  styleClass="fixed inset-0 flex items-center justify-center bg-white/80 z-50"
></p-progressSpinner>

<!-- 原有的根路由出口 -->
<router-outlet></router-outlet>

步骤2：在AppComponent中监听路由事件 #

通过Angular Router的导航事件判断加载状态：

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

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

  constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      switch (true) {
        case event instanceof NavigationStart:
          // 路由开始导航（包括Resolver执行），显示加载器
          this.isLoading = true;
          break;
        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel:
        case event instanceof NavigationError:
          // 导航结束/取消/出错，隐藏加载器
          this.isLoading = false;
          break;
        default:
          break;
      }
    });
  }
}

补充CSS（可选） #

如果不用Tailwind类，自己写样式让加载器居中：

.fixed.inset-0 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.flex.items-center.justify-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-white/80 {
  background-color: rgba(255, 255, 255, 0.8);
}
.z-50 {
  z-index: 50;
}

方案2：懒加载模块的根组件放置 #

如果只想在Products模块内的路由导航时显示加载器，可以把加载器放在该模块的根组件（比如ProductsComponent，包含模块内的router-outlet）中：

步骤1：ProductsComponent模板 #

<p-progressSpinner 
  *ngIf="isLoading" 
  class="loading-spinner"
></p-progressSpinner>

<router-outlet></router-outlet>

步骤2：监听模块内路由事件 #

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

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  isLoading = false;

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.subscribe((event: Event) => {
      // 仅监听当前模块内的路由导航
      if (event instanceof NavigationStart && event.url.includes('/products')) {
        this.isLoading = true;
      }
      if ([NavigationEnd, NavigationCancel, NavigationError].some(e => event instanceof e)) {
        this.isLoading = false;
      }
    });
  }
}

方案3：针对特定Resolver的局部加载器 #

如果只想在ProductsResolve执行时显示加载器，可以通过Service共享加载状态：

步骤1：创建加载状态Service #

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

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

  setLoading(loading: boolean) {
    this.loadingSubject.next(loading);
  }
}

步骤2：在Resolver中更新状态 #

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { ProductsService } from './products.service';
import { LoadingService } from '../loading.service';
import { finalize } from 'rxjs/operators';

@Injectable()
export class ProductsResolve implements Resolve<any> {
  constructor(
    private productsService: ProductsService,
    private loadingService: LoadingService
  ) {}

  resolve() {
    this.loadingService.setLoading(true);
    // 用finalize确保无论请求成功/失败都关闭加载器
    return this.productsService.getProducts().pipe(
      finalize(() => this.loadingService.setLoading(false))
    );
  }
}

步骤3：在父组件中订阅状态显示加载器 #

比如在AppComponent或ProductsComponent模板中：

<p-progressSpinner 
  *ngIf="loadingService.loading$ | async" 
  class="loading-spinner"
></p-progressSpinner>

关键说明 #

• Resolver执行时目标组件（MyHomeComponent）还未初始化，所以不能把加载器放在该组件模板里，否则组件未挂载时看不到加载器。
• 全局方案的体验最好，因为用户在路由切换时会看到统一的加载反馈，不会出现局部空白的情况。

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