如何在 Angular 中有条件地和动态地添加管道？

Question

我有多个管道，并且想根据条件向我的输入元素添加一个或多个管道。

必须检查输入元素（this）是否具有某种样式（this.styles），并根据该样式在输入元素中添加管道。

因此，如果样式为ReverseString，则必须将管道reverseStr 添加到输入元素中。

我创建了管道，当我添加它时，管道可以正常工作（参见reverseStr）：

<input type="text"
    #formItem
    [name]="id"
    [id]="id"
    class="form-control"
    [ngModel]="value | reverseStr"
    (blur)="change.emit(formItem.value)"/>

但是如何在 Angular 中有条件地添加管道？

我知道在 HTML 中添加如下内容是可能的：

[ngModel]="styles.includes('ReverseString') ? (value | SomePipe) : (value | pipe2)"

但这不是我认为最优雅的方式，如果我有多个输入组件，我每次都需要更改它

我创建了一个类似的函数：

addPipe() {
const mapping: any = {
    ReverseString: 'reverseStr',
    LowerCase: 'lowerCase',
    UpperCase: 'upperCase',
};

this.styles.forEach((style : any) => {
    const pipes = mapping[style];
    if (pipes) {
        // How can I add the pipes now dynamically? 
    }
});

}

但我不知道如何将管道动态添加到输入字段。

如何在 Angular 中有条件地动态添加管道？

Answer 1

你可以有一个通用的管道组件，你可以在你的模板中使用参数化管道，

所以在你的模板中有这样的东西，

<input type="text"
    #formItem
    [name]="id"
    [id]="id"
    class="form-control"
    [ngModel]="value | customPipe:desiredStyle"
    (blur)="change.emit(formItem.value)"/>

其中“customPipe”是您的管道，“desiredStyle”是您的参数（由“:”分隔），您可以处理管道内的逻辑

请参考此stackblitz example 以更好地了解！

Answer 2

要将动态Pipes 与input 一起使用，您只需将ngModel 绑定到组件的setters 和getters。您可以这样做：

1. 通过 Setter 和 Getter 绑定文本输入 ngModel

2. 检查输入的具体条件，如果计算结果为真，则使用管道

 // component.ts  

 private _value;

  get value() {
    if(this.nameInput) {
      const inputClasses = this.nameInput.nativeElement.getAttribute('class');

      if(inputClasses.indexOf('reverse') !== -1) {
        return (new ReverseStrPipe).transform(this._value);
      } 
    }
    return this._value;
  }

  set value(val) {
    this._value = val;
  }

和

// component.html
<input type="text"
 #nameInput
[(ngModel)]="value"/>

这是stackblitz 示例