如何向Angular自定义管道的构造函数传递字符串？

错误原因 #

Angular的管道类会被依赖注入（DI）系统自动处理，构造函数中的参数需要对应有效的注入令牌才能被DI识别。直接在构造函数中声明string类型参数时，DI系统无法找到对应的注入令牌，因此抛出No suitable injection token错误。

方案1：将参数移至transform方法（推荐，符合Angular管道设计） #

这种方式贴合Angular管道的使用逻辑，把动态参数放在transform方法中传递：

修改管道代码 #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customBoolean',
  standalone: true
})
export class CustomBooleanPipe implements PipeTransform {
  // 移除构造函数的replacement参数，将其作为transform的参数
  transform(object: any, keyName: string, replacement: string, ...args: unknown[]): string {
    return object[keyName] ? replacement : '';
  }
}

更新IGridColumn接口与配置 #

新增pipeArgs字段存储管道需要的额外参数：

export interface IGridColumn {
  name: string;
  dataKey: string;
  style?: string;
  dataPipe?: PipeTransform;
  pipeArgs?: unknown[]; // 新增：存储管道参数
  sortKey?: string;
  sortOrder?: SortDirection;
}

// 配置gridColumns时，实例化空管道并传入参数
gridColumns: IGridColumn[] = [
  {
    name: 'Beta',
    dataKey: 'betafeature',
    style: 'emphasized-cell',
    dataPipe: new CustomBooleanPipe(),
    pipeArgs: ['BETA']
  },
  {
    name: 'Paid',
    dataKey: 'paidfeature',
    style: 'emphasized-cell',
    dataPipe: new CustomBooleanPipe(),
    pipeArgs: ['$']
  }
];

修改模板调用逻辑 #

在模板中调用transform时传入管道参数：

<div *ngFor="let column of gridColumns" [matColumnDef]="column.name">
  <th mat-header-cell *matHeaderCellDef> {{ column.name }} </th>
  <td mat-cell *matCellDef="let element; let i = index" class="compact-form" [ngClass]="column.style">
    <div> 
      {{ column.dataPipe ? column.dataPipe.transform(element, column.dataKey, ...(column.pipeArgs || [])) : element[column.dataKey] }}
    </div>
  </td>
</div>

方案2：给构造函数参数添加注入令牌（适合必须在构造函数传入参数的场景） #

通过自定义注入令牌，让DI系统识别构造函数参数，同时支持手动实例化：

定义注入令牌 #

在单独文件（如tokens.ts）中创建注入令牌：

import { InjectionToken } from '@angular/core';

export const REPLACEMENT_TOKEN = new InjectionToken<string>('CustomBooleanReplacement');

修改管道构造函数 #

使用@Inject和@Optional装饰器标记参数，允许DI时不提供该参数，同时支持手动传参：

import { Pipe, PipeTransform, Inject, Optional } from '@angular/core';
import { REPLACEMENT_TOKEN } from './tokens';

@Pipe({
  name: 'customBoolean',
  standalone: true
})
export class CustomBooleanPipe implements PipeTransform {
  private replacement: string;
  constructor(
    @Optional() @Inject(REPLACEMENT_TOKEN) replacement?: string
  ) {
    this.replacement = replacement || '';
  }

  transform(object: any, keyName: string, ...args: unknown[]): string {
    return object[keyName] ? this.replacement : '';
  }
}

此方案下，原有的new CustomBooleanPipe('BETA')实例化方式可正常工作，同时DI系统不会再抛出错误。

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