如何将库函数直接转为Angular管道在HTML模板中使用？

Angular本身没有内置的“一键将函数转为管道”的机制，但可以通过以下两种方案避免重复编写管道样板代码：

方案一：通用管道 + 依赖注入 #

创建一个通用管道，通过注入token来调用对应的库函数，无需为每个函数单独写管道类。

步骤1：注册库函数为提供者 #

在模块中为每个库函数创建注入token，并注册为提供者：

import { NgModule, InjectionToken } from '@angular/core';
import { awesomeMethod, anotherAwesomeMethod } from 'awesome-library';

// 为每个库函数定义注入token
export const AWESOME_METHOD = new InjectionToken<(value: any) => any>('AWESOME_METHOD');
export const ANOTHER_AWESOME_METHOD = new InjectionToken<(value: any) => any>('ANOTHER_AWESOME_METHOD');

@NgModule({
  declarations: [
    GenericFunctionPipe,
    MyComponent
  ],
  providers: [
    { provide: AWESOME_METHOD, useValue: awesomeMethod },
    { provide: ANOTHER_AWESOME_METHOD, useValue: anotherAwesomeMethod }
  ]
})
export class MyModule {}

步骤2：实现通用管道 #

编写一个通用管道，通过注入器获取对应的函数并执行：

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

@Pipe({ name: 'func' })
export class GenericFunctionPipe implements PipeTransform {
  constructor(private injector: Injector) {}

  transform(value: any, funcToken: InjectionToken<(value: any) => any>): any {
    const targetFunc = this.injector.get(funcToken);
    return targetFunc(value);
  }
}

模板使用 #

在组件模板中传入对应的token即可调用函数：

<!-- 组件模板内 -->
{{ userInput | func: AWESOME_METHOD }}
{{ anotherInput | func: ANOTHER_AWESOME_METHOD }}

注意：需要在组件中导入对应的token并声明为public，或通过模块导出后在模板中使用

方案二：管道工厂函数 #

编写一个工厂函数，自动生成对应库函数的管道类，批量创建管道。

步骤1：实现管道工厂函数 #

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

// 自动生成管道的工厂函数
export function createFunctionPipe(targetFunc: (value: any) => any, pipeName: string): any {
  @Pipe({ name: pipeName })
  class GeneratedFunctionPipe implements PipeTransform {
    transform(value: any): any {
      return targetFunc(value);
    }
  }
  return GeneratedFunctionPipe;
}

步骤2：批量生成并注册管道 #

在模块中使用工厂函数生成管道，然后添加到declarations中：

import { NgModule } from '@angular/core';
import { awesomeMethod, anotherAwesomeMethod } from 'awesome-library';
import { createFunctionPipe } from './pipe-factory';

// 批量生成管道
const AwesomeMethodPipe = createFunctionPipe(awesomeMethod, 'awesomeMethod');
const AnotherAwesomeMethodPipe = createFunctionPipe(anotherAwesomeMethod, 'anotherAwesomeMethod');

@NgModule({
  declarations: [
    MyComponent,
    AwesomeMethodPipe,
    AnotherAwesomeMethodPipe
  ]
})
export class MyModule {}

模板使用 #

和手动编写的管道使用方式完全一致：

{{ userInput | awesomeMethod }}
{{ anotherInput | anotherAwesomeMethod }}

方案对比 #

• 方案一适合运行时需要切换函数或函数依赖其他服务的场景，可通过useFactory注入依赖。
• 方案二更接近你想要的批量无样板生成，本质是用代码自动生成管道类，减少重复工作。

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