Как добавить трубы условно и динамически в Angular? - PullRequest
Новая
       41

Как добавить трубы условно и динамически в Angular?

1 голос
/ 12 июля 2020

У меня несколько каналов, и я хочу добавить один или несколько каналов в зависимости от условия к моему элементу ввода.

Необходимо проверить, имеет ли элемент ввода (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?

I знаю, что это возможно в 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?

Ответы [ 2 ]

1 голос
/ 12 июля 2020

Чтобы использовать динамические c Pipes с input, вы можете просто привязать ngModel к сеттерам и геттерам компонента. Вот как это можно сделать:

1. Привязка ввода текста ngModel через сеттеры и геттеры

2. Проверьте заданное c условие на входе и используйте конвейер, если оно истинно 

 // 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 пример

0 голосов
/ 12 июля 2020

У вас может быть общий компонент трубы, и вы можете иметь параметризованный канал в своем шаблоне,

, так что что-то вроде этого в вашем шаблоне, 

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

, где customPipe - ваш канал и 'желаемый стиль' - ваш параметр (разделенный ':'), и вы можете обрабатывать logi c внутри вашего канала

Пожалуйста, обратитесь к этому примеру stackblitz , чтобы лучше понять!

...