Angular12如何将equalValidator封装进SharedModule供多组件调用

首先明确：Angular @NgModule 的 declarations、exports 数组仅支持组件、指令、管道三类可声明对象，纯工具函数属于TS语法层面的导出能力，不需要在Angular模块元数据中注册，你可以通过公共导出入口的方式纳入Shared模块统一管理：

1. 先整理目录结构，将equal-validator.ts放入shared/validators/目录下做分类存放
2. 在Shared模块的公共导出入口（通常是shared/index.ts，没有的话也可以直接写在shared.module.ts末尾）统一重导出该函数：

// shared/index.ts
export * from './validators/equal-validator';

3. 后续其他组件使用时，直接从Shared模块的统一路径导入即可，不需要再写冗长的相对路径：

import { equalValidator } from '@app/shared';
// 没有配置路径别名的话写相对路径即可：import { equalValidator } from '../shared';

补充：如果你需要在模板驱动表单中直接以指令形式使用该校验器，需要先封装为Angular校验指令，再注册到SharedModule：

// equal-validator.directive.ts
import { Directive, Input } from '@angular/core';
import { Validator, NG_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';
import { equalValidator } from './equal-validator';

@Directive({
  selector: '[equalValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: EqualValidatorDirective,
    multi: true
  }]
})
export class EqualValidatorDirective implements Validator {
  @Input() first: string;
  @Input() second: string;

  validate(control: AbstractControl): ValidationErrors | null {
    return equalValidator(this.first, this.second)(control);
  }
}

之后在SharedModule的declarations和exports数组中都加入EqualValidatorDirective，其他导入了SharedModule的业务模块就可以直接在模板中使用该指令，不需要额外导入。

非常适合，这也是Angular项目的通用最佳实践。Shared模块的定位就是存放全应用跨模块复用的通用逻辑，除了组件、指令、管道之外，通用校验函数、数据处理函数、类型定义、常量配置等都可以放在Shared模块下分类管理。
只要该工具逻辑不属于某个特定业务模块独有，多个业务场景都可能用到，放在Shared模块做统一导出维护就是合理的。

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