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

【问题标题】：How to use inject() in a Pipe with Angular 14?如何在 Angular 14 的管道中使用 inject()？
【发布时间】：2022-08-17 17:01:39
【问题描述】：

我正在尝试将服务离子注入管道。通常，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);
    }
}

谢谢您的帮助！

在 StackBlitz 中尝试过，没有错误：angular-ivy-ecxh8y.stackblitz.io

标签： angular angular-injector

【解决方案1】：

似乎只需在构造函数中导入就可以正常工作！

import { Component } from '@angular/core';
import { FilesizePipe } from './filesize.pipe';

interface File {
  name: string;
  size: any;
  type: string;
}

@Component({
  selector: 'app-root',
  template: `
    <!-- <div>
      <div *ngFor="let file of files">
        <p>{{ file.name }}</p>
        <p>{{ file.size | filesize }}</p>
        <p>{{ file.size | filesize:'megabytes' }}</p>      
      </div>
    </div>

    <div>
      <div *ngFor="let file of mapped">
        <p>{{ file.name }}</p>
        <p>{{ file.size }}</p>
      </div>
    </div> -->
    this is done programmatically. {{getTransformed()}}
  `,
  providers: [FilesizePipe],
})
export class AppComponent {
  files: File[];
  mapped: File[];
  constructor(private filesizePipe: FilesizePipe) {}
  ngOnInit() {
    this.files = [
      { name: 'logo.svg', size: 2120109, type: 'image/svg' },
      { name: 'banner.jpg', size: 18029, type: 'image/jpg' },
      { name: 'background.png', size: 1784562, type: 'image/png' },
    ];

    this.mapped = this.files.map((file) => {
      return {
        name: file.name,
        type: file.type,
        size: this.filesizePipe.transform(file.size, 'mb'),
      };
    });
  }

  getTransformed() {
    return this.filesizePipe.transform(96000, 'mb');
  }
}

stackblitz

【讨论】：