如何在 Angular 14 的管道中使用inject()？

Question

我正在尝试将服务注入管道中。通常，inject(...)工作正常，但在管道上下文中我收到错误：

Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`

我做错了什么或者我怎样才能让它工作？

当我将依赖项放入构造函数中时，该服务工作正常，例如constructor(private service: CheckboxFilterPipe)，但我现在想在组件代码中使用它（transform()以编程方式使用），不再可以选择在构造函数中编写依赖项。

@Pipe({
    name: 'checkboxFilter',
    pure: true,
})
export class CheckboxFilterPipe implements PipeTransform {
    /** */
    private service = inject(CheckboxFilterService);

    constructor() {}

    transform(items: Array<any>, filter: IFilterSettings, defaultFilter?: IFilterDefaults): any {
        this.service.init();
        return this.service.doFilter(items, filter, defaultFilter);
    }
}

感谢您的帮助！

Answer 1

如果您使用的是 Angular 14.1 版本。您可以使用 runInContext API。这将允许您在函数体内调用注入

管道.ts

import {
  EnvironmentInjector,
  inject,
  Pipe,
  PipeTransform,
} from '@angular/core';
import { UtilServiceService } from './util-service.service';

@Pipe({
  name: 'demo',
})
export class DemoPipe implements PipeTransform {
  private environment = inject(EnvironmentInjector);

  transform(value: any, args?: any): any {
    return this.environment.runInContext(() => {
      return inject(UtilServiceService).filterData(value);
    });
  }
}

例子

欲了解更多信息