角度动态管道

Question

我正在尝试构建动态管道，尽管我已将管道包含在应用程序模块提供程序中，但它引发了 NullInjector 错误。

我建议打开开发者选项中的控制台窗口来查看错误。

我还附上了以下演示链接。

在实际场景中，管道值将来自服务器，所以我需要一个动态管道。

https://stackblitz.com/edit/angular-lcidq5-q1a3hv?file=src%2Fapp%2Ftest%2Ftest.component.html

Answer 1

A

string

不能作为

inject

方法的有效标记。

我建议创建一个存储管道类型的对象：

import { Injector, Pipe, PipeTransform } from '@angular/core';
import { CustomPipe } from './custom.pipe';

const pipes = {
  fullform: CustomPipe,
};

@Pipe({
  name: 'dynamic',
})
export class DynamicPipe implements PipeTransform {
  public constructor(private injector: Injector) {}

  transform(value: any, pipeToken: any, pipeArgs: any[]): any {
    if (!pipeToken) {
      return value;
    } else {
      let pipe = this.injector.get<any>(pipes[pipeToken]);
      return pipe.transform(value, ...pipeArgs);
    }
  }
}

这样，您必须将管道添加到该对象才能使其工作，但您可以传递从 API 获得的字符串并将它们转换为各自的注入器令牌。