javascript - 多种样式的 Angular 管

我有一个实现DecimalPipe transform（）方法的简单自定义管道，如下所示：

export class MyDecimalFormatPipe implements PipeTransform {

    constructor(public decimalPipe: DecimalPipe) {};

    transform(value: any) {
        if (value || value === 0) {
            value = this.decimalPipe.transform(value, '1.2-2');
        }
        return value;
    }
}

这是插件链接：https://plnkr.co/edit/eEfXoXdM1OakuX1TjR1N?p=preview
显然，这不是一个自定义管道，因为它实现了DecimalPipe，但是我的最终目标是让该管道支持除“ 1.2-2”以外的更多模式。我做了一些研究，每个人似乎都在使用诸如if / else或switch语句之类的控制结构。我想这看起来像：

export class MyDecimalFormatPipe implements PipeTransform {

    constructor(public decimalPipe: DecimalPipe) {};

    transform(value: any) {
        if (somevalue) {
            let format = '1.2-2'
            value = this.decimalPipe.transform(value, format);
        }
        else if (othervalue) {
            let format = '1.4-4'
            value = this.decimalPipe.transform(value, format);
        }
        ...
        return value
    }
}

这似乎是错误且“笨拙的”，随着我们添加更多的格式模式，此方法将变得相当大。我想管道应该具有许多基于输入值设置的预设格式模式。也许可以为此创建一个方法，如下所示：

setFormatPattern(inputPattern: string): string {
    let pattern: any;
    this.myPatternsArray.forEach(element => {
        if (element.format === inputPattern ) {
           pattern = element.pattern;
        }
    });
    return pattern;
}

我正在为这个问题的设计以及实现（代码）而苦苦挣扎。一定有更简单的方法...

最佳答案

您可以像这样将参数传递给管道：

{{ whatever | mypipe: 'option1' }}

这将以args的形式传递到您的pipe.ts中：

transform(value: any, args?: string) {
  switch (args) {
    case 'option1':
      return handleOption1(value);
    case 'option2':
      return handleOption2(value);
    ...
  }
}