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

我有多个管道，希望根据条件向输入元素添加一个或多个管道

必须检查输入元素（this）是否具有特定样式（this.styles），并且必须基于该样式向输入元素添加管道

因此，如果样式为

ReverseString

则必须将管道

reverseStr

添加到输入元素中

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

reverseStr

）：

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

我创建了如下函数：

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? 
    }
});

}

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

---

如何以角度有条件地动态添加管道？

您可以有一个公共管道组件，也可以在模板中有参数化管道

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

所以在你的模板中类似这样的东西

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

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

---

请参考此以更好地理解

要将动态

管道

与

输入

一起使用，您只需将

ngModel

绑定到组件的设置器和获取器。以下是如何做到这一点：

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

---

下面是一个示例

您能否举例说明customPipe的外观以及如何使用desiredStyle。因为输入元素（this）具有特定的样式（this.styles），并且基于该样式，必须向输入元素添加管道。对于style，我不是指css类或样式。当我像这样尝试时，这个类对我不起作用：

get value（）{const-mapping:any={ReverseString:new-ReverseStr，LowerCase:new-LowerCase，UpperCase:new-UpperCase，}；This.styles.forEach（（style:any）=>{const-directive=mapping[style]；如果（指令）{return（directive）.transform（this.\u value）；}}）；返回this.\u value；}

因此我不想查看css类，而是要查看范围。如果

this.styles

包含一个给定值，我想为该值使用一个特定的管道。@可以修改同一个plunker并让我知道urlnice。这是可行的，但我在页面上有多个输入字段（#nameInput），当我编辑另一个输入字段时（#名称输入），带有“ReverseString”的输入字段的值发生变化。我如何从一个位置使用此功能，以便不在每个输入组件上重复此功能，而是从一个位置加载它。？可以看到更新的plunker。您在

名称

字段中键入的内容将转换为

大写

，但对于电子邮件，它将始终是

小写

谢谢，但这不是我的意思。输入字段#nameInput是一个组件，我多次使用它。我的意思是我更经常使用输入字段#nameInput。

 // 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"/>