Angular 14：Pipe中使用inject()出现NG0203错误的解决方法

错误原因 #

你遇到的报错：

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

核心问题在于：当你手动在组件中通过new CheckboxFilterPipe()实例化Pipe时，Angular没有为这个实例提供注入上下文，导致inject()无法获取到服务实例。而之前构造函数注入能正常工作，是因为Pipe由Angular框架负责实例化，框架会自动提供注入上下文。

解决方案 #

方案一：通过Injector获取Pipe实例（推荐）

不要手动new Pipe，而是借助Angular的Injector来获取Pipe实例，确保Pipe在正确的注入上下文里被创建：

1. 在组件中注入Injector：

import { Component, Injector } from '@angular/core';
import { CheckboxFilterPipe } from './checkbox-filter.pipe';

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private injector: Injector) {}

  someMethod() {
    // 通过injector获取Pipe实例
    const pipe = this.injector.get(CheckboxFilterPipe);
    // 调用transform方法
    const filteredItems = pipe.transform(yourItems, yourFilter, yourDefaultFilter);
  }
}

2. 确保Pipe已在模块的declarations中声明；如果是独立管道，需设置standalone: true。

方案二：将服务作为参数传入transform方法

修改Pipe的transform方法，从调用方（组件）传入服务实例，避免在Pipe内部依赖注入：

1. 修改Pipe代码：

@Pipe({
    name: 'checkboxFilter',
    pure: true,
})
export class CheckboxFilterPipe implements PipeTransform {
    // 移除inject()调用
    transform(items: Array<any>, filter: IFilterSettings, defaultFilter?: IFilterDefaults, service?: CheckboxFilterService): any {
        if (!service) {
            throw new Error('CheckboxFilterService is required');
        }
        service.init();
        return service.doFilter(items, filter, defaultFilter);
    }
}

2. 在组件中注入服务并传入transform：

import { Component } from '@angular/core';
import { CheckboxFilterPipe } from './checkbox-filter.pipe';
import { CheckboxFilterService } from './checkbox-filter.service';

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private filterService: CheckboxFilterService) {}

  someMethod() {
    const pipe = new CheckboxFilterPipe();
    const filteredItems = pipe.transform(yourItems, yourFilter, yourDefaultFilter, this.filterService);
  }
}

方案三：使用EnvironmentInjector.runInContext创建Pipe实例

通过EnvironmentInjector的runInContext方法，在注入上下文环境中实例化Pipe：

1. 在组件中注入EnvironmentInjector：

import { Component, EnvironmentInjector } from '@angular/core';
import { CheckboxFilterPipe } from './checkbox-filter.pipe';

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private envInjector: EnvironmentInjector) {}

  someMethod() {
    let pipe: CheckboxFilterPipe;
    // 在注入上下文中执行实例化
    this.envInjector.runInContext(() => {
      pipe = new CheckboxFilterPipe();
    });
    // 调用transform方法
    const filteredItems = pipe.transform(yourItems, yourFilter, yourDefaultFilter);
  }
}

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