Angular 12报错：inject()必须从注入上下文调用的问题求助

问题场景 #

创建了包含函数属性的配置文件：

const conf = {
   decoratorFunc: (val: string) => inject(MyCustomPipe).transform(val)
},

在组件中调用该函数：

private someMethod(){
  conf.decoratorFunc('Test');
}

报错信息 #

ERROR Error: inject() must be called from an injection context
at injectInjectorOnly (core.mjs:4768:15)
at ɵɵinject (core.mjs:4778:12)

已尝试添加"paths": { "@angular/*": [ "./node_modules/@angular/*" ] }但无效，当前使用Angular 12版本。

原因 #

inject()只能在Angular的注入上下文内调用，比如组件/服务的构造函数、useFactory工厂函数、Angular生命周期钩子等。普通配置对象中的函数不属于注入上下文，直接调用inject()会触发报错。

解决方法 #

方法1：组件内注入管道后传入配置函数 #

在组件构造函数中注入管道实例，修改配置函数接受管道参数：

// 配置文件
const conf = {
   decoratorFunc: (val: string, pipe: MyCustomPipe) => pipe.transform(val)
};

// 组件代码
constructor(private myCustomPipe: MyCustomPipe) {}

private someMethod(){
  conf.decoratorFunc('Test', this.myCustomPipe);
}

方法2：将配置逻辑封装为注入服务 #

把配置对象改成Injectable服务，在服务构造函数或类内合法使用inject()：

// 配置服务
@Injectable({ providedIn: 'root' })
export class ConfigService {
  private myCustomPipe = inject(MyCustomPipe);

  decoratorFunc = (val: string) => this.myCustomPipe.transform(val);
}

// 组件中使用
constructor(private configService: ConfigService) {}

private someMethod(){
  this.configService.decoratorFunc('Test');
}

方法3：通过EnvironmentInjector手动获取实例 #

如果要保留原有配置对象结构，可通过组件的EnvironmentInjector获取管道实例后传入：

// 组件代码
constructor(private environmentInjector: EnvironmentInjector) {}

private someMethod(){
  const pipe = this.environmentInjector.get(MyCustomPipe);
  conf.decoratorFunc('Test', pipe);
}

// 配置文件对应修改
const conf = {
   decoratorFunc: (val: string, pipe: MyCustomPipe) => pipe.transform(val)
};

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