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

您可以从模板（HTML）绑定事件并将其捕获到组件中。

Answer 2

可以使用ControlValueAccessor完成。看一下文档https://angular.io/api/forms/ControlValueAccessor。并尝试使用Google搜索示例。

Answer 3

您在这里有一个很好的自定义事件示例： Angular event emitter

<input />标签

3 个答案: