如何优雅实现父组件根据多子组件异步数据加载状态显示加载动画？

这种场景在Angular开发里太常见了，你一开始用共享服务计数的思路其实没毛病，但直接同步修改状态确实容易踩变更检测的坑。给你分享几个更优雅的解决方案，既能实现需求又能避免那些讨厌的错误：

方案1：用RxJS Subject 管理全局加载状态（最推荐） #

这个方法通过共享服务维护一个基于Observable的加载状态，利用RxJS的异步特性避开变更检测的同步更新问题，同时能灵活支持任意层级的子组件。

第一步：实现共享加载服务 #

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

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private activeRequestCount = 0;
  private loadingSubject = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的Observable，避免外部直接修改状态
  public loading$: Observable<boolean> = this.loadingSubject.asObservable();

  // 子组件发起请求时调用
  startRequest(): void {
    this.activeRequestCount++;
    this.updateLoadingStatus();
  }

  // 请求完成（无论成功/失败）时调用
  endRequest(): void {
    // 用Math.max防止计数变成负数
    this.activeRequestCount = Math.max(0, this.activeRequestCount - 1);
    this.updateLoadingStatus();
  }

  private updateLoadingStatus(): void {
    this.loadingSubject.next(this.activeRequestCount > 0);
  }
}

第二步：子组件中调用服务 #

每个需要异步加载数据的子组件，在请求开始和结束时调用服务的方法：

import { LoadingService } from './loading.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-child',
  template: '<div>{{ data | json }}</div>'
})
export class ChildComponent implements OnInit {
  data: any;

  constructor(private loadingService: LoadingService, private http: HttpClient) {}

  ngOnInit(): void {
    this.loadingService.startRequest();
    this.http.get('/api/your-data').subscribe({
      next: (res) => this.data = res,
      complete: () => this.loadingService.endRequest(),
      error: () => this.loadingService.endRequest() // 失败也要记得结束计数
    });
  }
}

第三步：父组件中订阅状态 #

父组件用async pipe订阅加载状态，Angular会自动处理变更检测，完全不会触发changedAfterChecked错误：

<!-- 加载动画 -->
<div *ngIf="loading$ | async" class="loading-overlay">
  <span>加载中...</span>
</div>

<!-- 子组件们 -->
<app-child></app-child>
<app-child-2></app-child-2>

import { LoadingService } from './loading.service';

@Component({ selector: 'app-parent', templateUrl: './parent.component.html' })
export class ParentComponent {
  loading$ = this.loadingService.loading$;

  constructor(private loadingService: LoadingService) {}
}

方案2：子组件通过输出事件通知加载完成 #

如果不想用全局共享服务，也可以让每个子组件在加载完成时触发事件，父组件统计完成数量来控制加载状态。

子组件定义输出事件 #

import { Output, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({ selector: 'app-child', template: '<div>{{ data | json }}</div>' })
export class ChildComponent implements OnInit {
  @Output() loaded = new EventEmitter<void>();
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('/api/your-data').subscribe({
      next: (res) => this.data = res,
      complete: () => this.loaded.emit(),
      error: () => this.loaded.emit()
    });
  }
}

父组件监听子组件事件 #

import { ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({ selector: 'app-parent', templateUrl: './parent.component.html' })
export class ParentComponent implements AfterViewInit {
  @ViewChildren(ChildComponent) childComponents!: QueryList<ChildComponent>;
  isLoading = true;
  loadedChildCount = 0;

  ngAfterViewInit(): void {
    const totalChildren = this.childComponents.length;
    this.childComponents.forEach(child => {
      child.loaded.subscribe(() => {
        this.loadedChildCount++;
        if (this.loadedChildCount === totalChildren) {
          this.isLoading = false;
        }
      });
    });

    // 如果子组件是动态生成的（比如*ngFor），还要监听QueryList的变化
    this.childComponents.changes.subscribe(() => {
      // 重新绑定事件逻辑
    });
  }
}

父组件模板：

<div *ngIf="isLoading" class="loading-overlay">加载中...</div>
<app-child></app-child>
<app-child-2></app-child-2>

这个方法的优点是组件间耦合低，但只适合子组件直接在父组件模板里的场景，嵌套组件或者动态组件的话处理起来会比较麻烦。

方案3：路由Resolver（适合路由级数据加载） #

如果你的子组件是路由页面的一部分，可以用Angular的路由Resolver在路由激活前就加载好所有需要的数据，这样父组件（路由组件）初始化时就已经有了所有数据，不需要显示加载动画。不过这个方法只适用于路由场景，对页面内的多个子组件不太适用。

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