Angular 2+如何向自定义组件传递表单验证指令？

当然可以实现！你想要的就是不用硬编码就能把验证指令（甚至其他属性、事件）透传给自定义组件内部的<input>，这在Angular里完全可行，而且有几种贴近你需求的方案，包括类似...params的实现方式：

方案1：属性对象透传（类似...params，最直接） #

这种方式就像你说的...params，把所有要传递的指令、属性打包成一个对象传给组件，再通过展开绑定到内部input上：

1. 改造自定义组件 #

在组件类里新增一个@Input()来接收所有额外的属性/指令：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <!-- 把传入的所有属性/指令绑定到内部input -->
    <input 
      [(ngModel)]="value"
      [attr]="extraProps"
    />
  `
})
export class MyComponent {
  // 组件原有输入输出属性
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();

  // 接收所有额外的属性、指令（属性型指令通过键值对传递）
  @Input() extraProps: Record<string, any> = {};
}

2. 使用组件时传递指令/属性 #

直接把需要的验证指令和其他属性打包成对象传入：

<my-component 
  [(value)]="myFormValue"
  [extraProps]="{
    validator1: true,
    validator2: true,
    type: 'text',
    placeholder: '请输入内容'
  }"
></my-component>

这种方式完全不需要修改组件源码来适配新指令，想传多少、传什么都由使用方决定。

方案2：宿主属性自动透传（贴近原生写法） #

如果你想更像使用原生<input>那样直接写指令（比如<my-component validator1 validator2></my-component>），可以让组件自动把宿主元素上的属性/指令同步到内部input：

1. 改造自定义组件 #

利用ElementRef获取宿主元素，在组件初始化后把属性同步到内部input：

import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <input #internalInput [(ngModel)]="value" />
  `
})
export class MyComponent implements AfterViewInit {
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();
  @ViewChild('internalInput') internalInput: ElementRef<HTMLInputElement>;

  constructor(private hostEl: ElementRef<HTMLElement>) {}

  ngAfterViewInit() {
    // 遍历宿主元素的所有属性，同步到内部input
    const hostAttrs = this.hostEl.nativeElement.attributes;
    for (const attr of hostAttrs) {
      // 跳过组件自身的输入属性（比如value），避免冲突
      if (attr.name !== 'value') {
        this.internalInput.nativeElement.setAttribute(attr.name, attr.value);
      }
    }
  }
}

2. 使用组件时直接写指令 #

现在你可以像用原生input一样给自定义组件加指令：

<my-component 
  [(value)]="myFormValue"
  validator1
  validator2
  type="text"
  placeholder="请输入内容"
></my-component>

注意：对于属性型指令，这种方式可以直接生效；如果是结构型指令，可能需要额外处理，但你的验证指令应该都是属性型的，完全适用。

方案3：内容投影（最高灵活性） #

如果需要完全让用户控制内部input的所有细节，比如加自定义样式、多个指令组合，内容投影是最优解：

1. 改造自定义组件 #

通过ng-content投影用户传入的input：

import { Component, Output, EventEmitter, ContentChild, AfterContentInit, ElementRef } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div class="component-wrapper">
      <!-- 投影用户自定义的input -->
      <ng-content select="input"></ng-content>
    </div>
  `
})
export class MyComponent implements AfterContentInit {
  @ContentChild('userInput') userInput: ElementRef<HTMLInputElement>;
  @Output() valueChange = new EventEmitter<string>();

  ngAfterContentInit() {
    // 监听投影input的输入事件，同步到组件的输出
    this.userInput.nativeElement.addEventListener('input', (e) => {
      this.valueChange.emit((e.target as HTMLInputElement).value);
    });
  }
}

2. 使用组件时传入带指令的input #

用户可以直接把带有验证指令的input放到组件标签内：

<my-component (valueChange)="handleValueChange($event)">
  <input 
    #userInput 
    type="text" 
    validator1 
    validator2 
    validator3 
    [(ngModel)]="myFormValue"
    class="custom-input"
  />
</my-component>

这种方式给了用户最大的自由度，组件只负责提供封装的容器和必要的事件同步，完全不用关心input上的指令或属性。

总结 #

• 想要类似...params的简洁传递，选方案1，打包属性对象即可；
• 想贴近原生input的写法，选方案2，直接给组件加指令/属性；
• 要最高灵活性，让用户完全自定义input，选方案3，内容投影是最佳选择。

所有方案都不需要在组件源码中硬编码具体的验证指令，支持传递任意数量（包括零个）的指令或属性。

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