Angular如何用Pipe实现textarea与数组双向互转 消除重复代码

Angular 原生的Pipe默认是单向转换，无法直接支持双向绑定的自动双向转换，你可以根据需求选择以下两种实现方案，都可以完全消除重复的转换函数：

方案1：Pipe + 拆分双向绑定 （轻量实现） #

第一步：封装公共转换Pipe #

// array-to-newline.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'arrayToNewline' })
export class ArrayToNewlinePipe implements PipeTransform {
  // 数组转带换行的字符串，用于textarea渲染
  transform(value: string[] | null | undefined): string {
    return Array.isArray(value) ? value.join('\n') : '';
  }
}

不要忘记在对应模块的declarations中引入该Pipe。

第二步：模板中使用 #

将原本的[(ngModel)]拆分为属性绑定+事件绑定，直接在模板内完成反向转换：

<textarea 
  class="form-control" 
  rows="3" 
  [ngModel]="item.color | arrayToNewline"
  (ngModelChange)="item.color = $event.split(/[\r\n]+/).filter(Boolean)"
></textarea>

<!-- 其他数组字段直接复用即可，不需要额外写组件方法 -->
<textarea 
  class="form-control" 
  rows="3" 
  [ngModel]="item.pattern | arrayToNewline"
  (ngModelChange)="item.pattern = $event.split(/[\r\n]+/).filter(Boolean)"
></textarea>

其中filter(Boolean)用于过滤空行，不需要可以删除。

方案2：自定义表单控件指令 （无侵入最优解） #

如果需要更简洁的用法，直接封装实现ControlValueAccessor的指令，支持和原生[(ngModel)]完全一致的用法，不需要在模板写任何转换逻辑：

第一步：封装自定义指令 #

// textarea-array.directive.ts
import { Directive, HostListener, Provider, forwardRef, ElementRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const TEXTAREA_ARRAY_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextareaArrayDirective),
  multi: true
};

@Directive({
  selector: 'textarea[textareaArray]',
  providers: [TEXTAREA_ARRAY_ACCESSOR]
})
export class TextareaArrayDirective implements ControlValueAccessor {
  private onChange = (value: string[]) => {};
  private onTouched = () => {};

  constructor(private el: ElementRef<HTMLTextAreaElement>) {}

  // 组件值写入视图：数组转换行字符串
  writeValue(value: string[]): void {
    this.el.nativeElement.value = Array.isArray(value) ? value.join('\n') : '';
  }

  // 用户输入更新组件值：字符串转数组
  @HostListener('input', ['$event.target.value'])
  onInput(value: string): void {
    const arrayValue = value.split(/[\r\n]+/).filter(Boolean);
    this.onChange(arrayValue);
  }

  @HostListener('blur')
  onBlur(): void {
    this.onTouched();
  }

  registerOnChange(fn: (value: string[]) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }
}

在对应模块的declarations中引入该指令。

第二步：模板中直接使用 #

只需要给textarea加textareaArray属性即可，完全和普通双向绑定用法一致：

<textarea 
  class="form-control" 
  rows="3" 
  textareaArray
  [(ngModel)]="item.color"
></textarea>

<textarea 
  class="form-control" 
  rows="3" 
  textareaArray
  [(ngModel)]="item.pattern"
></textarea>

该方案所有转换逻辑都封装在指令内部，后续如果需要调整分隔规则、空行处理逻辑，只需要修改指令一处即可，维护成本最低。

内容的提问来源于stack exchange，提问作者Vikash Rathee