本文介绍一种基于 promise.all 的 angular 服务设计模式，用于在父组件触发后，统一通知多个已注册子组件执行异步校验，并等待所有响应完成后再汇总处理结果。
本文介绍一种基于 promise.all 的 angular 服务设计模式，用于在父组件触发后，统一通知多个已注册子组件执行异步校验，并等待所有响应完成后再汇总处理结果。
在 Angular 应用中，当需要协调多个独立组件（如表单子模块、动态表单项、嵌套编辑器等）共同参与一项全局校验逻辑（例如“提交前全量错误检查”），直接依赖 @Output/EventEmitter 或简单 Subject 广播往往难以保证响应的完整性与可等待性——前者仅适用于父子通信，后者缺乏天然的“等待全部完成”语义。
一个健壮、可测试且符合 Angular 架构原则的解决方案是：构建中心化注册式服务 + 显式接口契约 + 并发 Promise 聚合。该方案不依赖 DOM 事件或不可控的订阅生命周期，而是通过类型安全的接口约束与标准 Promise 流程实现可控的协同。
✅ 核心实现步骤
1. 定义校验契约接口
首先声明统一接口，确保所有参与校验的组件提供一致的异步方法签名：
// error-checking.interface.ts
export interface ErrorCheckingComponent {
checkError(): Promise<string[]>;
}该接口强制组件暴露 checkError() 方法，返回 Promise<string[]>，便于后续统一聚合错误列表。
2. 创建可注册的服务
服务内部维护已注册组件引用列表，并提供注册/注销机制（配合组件生命周期自动管理）：
// error-message.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ErrorMessageService {
private registeredComponents: ErrorCheckingComponent[] = [];
registerComponent(component: ErrorCheckingComponent): void {
if (!this.registeredComponents.includes(component)) {
this.registeredComponents.push(component);
}
}
removeComponent(component: ErrorCheckingComponent): void {
const index = this.registeredComponents.indexOf(component);
if (index > -1) {
this.registeredComponents.splice(index, 1);
}
}
// 主校验入口：并发执行所有组件的 checkError()，等待全部完成
async checkErrors(): Promise<string[]> {
if (this.registeredComponents.length === 0) {
return [];
}
try {
const results = await Promise.all(
this.registeredComponents.map(comp => comp.checkError())
);
return results.flat(); // 合并多维错误数组为一维
} catch (error) {
console.error('Error during collective validation:', error);
throw error;
}
}
}? 注意：Promise.all() 会短路失败（任一 Promise reject 则整体 reject）。若需“尽力收集所有结果”（包括失败项），应改用 Promise.allSettled() 并做状态判别。
3. 子组件实现接口并自动注册
// child.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ErrorCheckingComponent } from './error-checking.interface';
import { ErrorMessageService } from './error-message.service';
@Component({
selector: 'app-child',
template: `<div>Child component</div>`
})
export class ChildComponent implements OnInit, OnDestroy, ErrorCheckingComponent {
constructor(private errorService: ErrorMessageService) {}
ngOnInit(): void {
this.errorService.registerComponent(this);
}
ngOnDestroy(): void {
this.errorService.removeComponent(this);
}
checkError(): Promise<string[]> {
// 模拟异步校验（如 HTTP 请求、表单控件状态检查）
return new Promise(resolve => {
setTimeout(() => {
const errors: string[] = [];
if (/* your validation logic */) {
errors.push('Invalid email format');
}
resolve(errors);
}, 300);
});
}
}4. 父组件触发并消费结果
// parent.component.ts
import { Component } from '@angular/core';
import { ErrorMessageService } from './error-message.service';
@Component({
selector: 'app-parent',
template: `
<button (click)="runValidation()">Validate All Children</button>
<div *ngIf="errors.length > 0">
<h4>Found Errors:</h4>
<ul><li *ngFor="let err of errors">{{ err }}</li></ul>
</div>
`
})
export class ParentComponent {
errors: string[] = [];
constructor(private errorService: ErrorMessageService) {}
async runValidation() {
try {
this.errors = await this.errorService.checkErrors();
console.log('All checks completed. Errors:', this.errors);
if (this.errors.length === 0) {
// ✅ 全局校验通过，可继续提交等操作
this.submitForm();
}
} catch (err) {
console.error('Validation pipeline failed:', err);
this.errors = ['System validation error'];
}
}
private submitForm() {
// 实际提交逻辑
}
}⚠️ 关键注意事项
- 内存泄漏防护：务必在 ngOnDestroy 中调用 removeComponent()，避免组件销毁后仍被服务持有；
- 重复注册防御：服务端添加 includes() 判断，防止同一组件多次注册导致重复执行；
- 空注册兜底：checkErrors() 应处理 registeredComponents.length === 0 场景，避免 Promise.all([]) 返回空数组引发歧义；
- 错误粒度控制：建议每个组件返回语义明确的错误字符串（如 'email.required'），便于国际化与 UI 映射；
- 性能考量：若组件数量极多或单个校验耗时显著，可考虑增加超时控制（如 Promise.race([checkPromise, timeoutPromise])）。
此模式将“通知—响应—聚合”流程完全解耦于服务层，既保持组件高内聚（各司其职做自身校验），又赋予父级强协调能力，是 Angular 中处理跨组件协作型业务逻辑的推荐实践。
