Расширенная функциональность для тега <input>

Question

Я хотел бы создать компонент, который содержит тег <input> и добавляет к нему дополнительные функциональные возможности, такие как значок «X» в виде открытого текста или любые другие настраиваемые действия и разметку, сохраняя при этом те же привязки событий ((click), (keyup) и т. Д.) Собственного элемента ввода. Пример:

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

Можно ли сделать это без явного создания пользовательских выходных данных и обработчиков событий внутри дочернего элемента ввода для ВСЕХ возможных привязок событий?

Любые предложения приветствуются. Спасибо!

Answer 1

У вас есть очень хороший пример пользовательского события здесь: Источник угловых событий

Answer 2

Да, это возможно, используя интерфейс 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) и записать их в ваш component.ts

Answer 3

Это можно сделать с помощью ControlValueAccessor.Взгляните на документацию https://angular.io/api/forms/ControlValueAccessor. и попробуйте поискать в поисках примеров.