Angular 14中如何在Resolver获取数据时显示进度加载器？

核心问题 #

你遇到的问题有两个关键原因：

1. Resolver执行时机导致组件订阅太晚：当路由配置了Resolver时，目标组件（MyComponent）会在Resolver完成数据解析后才被实例化。此时组件内的router.events订阅是在导航已经完成（或Resolver执行完毕）后才建立的，根本无法捕获Resolver运行期间的NavigationStart事件，自然无法触发loading状态切换。
2. 模板写法错误：<ng-template [ngIf]="loading">的用法不正确——<ng-template>本身不会自动渲染，[ngIf]作为属性绑定无法触发模板的显示逻辑，必须使用*ngIf结构指令或配合ngTemplateOutlet才能生效。

解决方案 #

方案1：全局监听导航事件（推荐） #

在根组件（如AppComponent）中监听路由事件，控制全局加载器的显示。这种方式不受Resolver执行时机影响，能覆盖所有路由场景：

1. 修改根组件代码：

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

@Component({
  selector: 'app-root',
  template: `
    <!-- 全局加载器，可通过CSS调整位置样式 -->
    <div class="global-loader" *ngIf="loading">
      <p-progressSpinner></p-progressSpinner>
    </div>
    <router-outlet></router-outlet>
  `,
  styles: [`
    .global-loader {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
    }
  `]
})
export class AppComponent {
  loading = false;

  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.loading = true;
      } else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
        this.loading = false;
      }
    });
  }
}

2. 确保导入PrimeNG模块：
   在AppModule或共享模块中导入ProgressSpinnerModule：

import { ProgressSpinnerModule } from 'primeng/progressspinner';

@NgModule({
  imports: [
    // 其他模块
    ProgressSpinnerModule
  ]
})
export class AppModule {}

方案2：Resolver结合加载服务控制状态 #

通过独立的加载服务，在Resolver中手动控制加载状态，组件订阅服务状态更新：

1. 创建加载服务：

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

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

  get loadingStatus(): Observable<boolean> {
    return this.loading$.asObservable();
  }

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

2. 修改Resolver代码：

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { LoadingService } from './loading.service';
// 替换为你的数据服务
import { MyDataService } from './my-data.service';

@Injectable()
export class MyResolver implements Resolve<any> {
  constructor(
    private loadingService: LoadingService,
    private dataService: MyDataService
  ) {}

  resolve() {
    this.loadingService.setLoading(true);
    // 实际数据请求逻辑，确保在完成/失败时关闭加载状态
    return this.dataService.fetchData()
      .pipe(
        // 模拟延迟，测试加载效果
        // delay(2000)
      )
      .finally(() => {
        this.loadingService.setLoading(false);
      });
  }
}

3. 修改组件代码：

import { Component, OnInit } from '@angular/core';
import { LoadingService } from './loading.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my',
  template: `
    <p-progressSpinner *ngIf="loading"></p-progressSpinner>
    <div *ngIf="!loading">
      <!-- 你的组件内容 -->
      <div>数据：{{ myData | json }}</div>
    </div>
  `
})
export class MyComponent implements OnInit {
  loading = false;
  myData: any;

  constructor(
    private loadingService: LoadingService,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit() {
    // 获取Resolver返回的数据
    this.myData = this.activatedRoute.snapshot.data['myData'];
    
    // 订阅加载状态
    this.loadingService.loadingStatus.subscribe(status => {
      this.loading = status;
    });
  }
}

4. 修复模板写法：
   使用*ngIf结构指令替代原有的<ng-template [ngIf]>写法，确保加载器能正确渲染。

关键注意事项 #

• 无论哪种方案，都要确保ProgressSpinnerModule已导入到对应的Angular模块中。
• 如果Resolver抛出错误，一定要在finally块中关闭加载状态，避免加载器一直显示。
• 全局加载器建议添加CSS样式固定在页面中央，提升用户体验。

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