<input>标记的扩展功能

Question

我想创建一个包含<input>标记的组件，并为其添加额外的功能，例如一个明文值"X“图标，或任何其他自定义操作和标记，同时保留原生输入元素的相同事件绑定((click)、(keyup)等)。示例：

<my-input (keyup)="handleKeystroke($event)" (click)="handleClick($event)" [customProp]="...">

有没有可能在不显式地为所有可能的事件绑定在子输入元素上创建自定义输出和事件处理程序的情况下这样做呢？

欢迎提出任何建议。谢谢!

Answer 1

是的，使用ControlValueAccessor接口是可能的

以下是在组件类中实现时需要添加的示例代码

const TYPE_CONTROL_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => YourComponent ),
  multi: true
};

@Component({
  selector: 'custom-control',
  templateUrl: './custom-control.component.html',
  styleUrls: ['./custom-control.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [TYPE_CONTROL_ACCESSOR]
})

 export class YourComponent implements ControlValueAccessor {

 private onTouch: Function;
 private onModelChange: Function;

 writeValue(obj: string): void {
      this.value = obj;
 }
 registerOnChange(fn: any): void {
      this.onModelChange = fn;
 }
 registerOnTouched(fn: any): void {
 this.onTouch = fn;
 }

您可以从模板绑定事件并在component.ts中捕获它们

Answer 2

这可以使用ControlValueAccessor来完成。请看一下文档https://angular.io/api/forms/ControlValueAccessor。试着用谷歌搜索一下例子。

Answer 3

这里有一个非常好的自定义事件示例：Angular event emitter