Обработка щелчков по метке для пользовательского компонента ввода в Angular

#javascript #angular

Вопрос:

У меня проблема с пользовательским компонентом ввода, который должен работать в качестве замены для an <input> . Все работает нормально, за исключением того, как работают клики по компоненту <label> , предназначенному для моего компонента. Читая документы label , я ожидаю click , что при нажатии на метку в моем компоненте произойдет событие, но я ничего не получаю.

Т. е. мой HTML выглядит так:

 <label for="mycomponent">Some label</label>
<my-component id="mycomponent"></my-component>

с my-component тем, чтобы быть компонентом, реализующим @HostListener функцию for click . Проблема, с которой я столкнулся сейчас, заключается в том, что click обработчик никогда не запускается нажатием на метку, он, конечно, работает, если я нажимаю непосредственно на компонент. Как я могу отреагировать на нажатие метки внутри компонента, чтобы я мог вручную переслать ее input внутрь моего компонента?

Я создал примерный проект здесь: https://github.com/Anteru/ng-component-focus-test

Поведение, которое я хочу, состоит в том, что обе метки работают одинаково, т. Е. Нажатие на метку фокусирует ввод. Для пользователя не должно иметь значения, используют ли они «обычный старый» ввод или мой модный компонент.

1. Пожалуйста, покажите нам код my-component . Вам нужно создать ввод, который будет принимать идентификатор, который будет идентификатором ввода, а затем установить этот идентификатор в базовый тег ввода

Ответ №1:

Я не знаю, есть ли лучший подход, но вы всегда можете использовать ViewChild в своем my-component

  @ViewChild('myinput',{static:true,read:ElementRef}) myInput

И использовать

 <label (click)="myComponent.myInput.nativeElement.focus()">Hello</label>
<my-component #myComponent ></my-component>

1. Проблема здесь в том, что клиент моего компонента не знает, что такое элемент ввода в моем компоненте, поэтому это намного сложнее, чем мне бы хотелось. Я думаю, я мог бы попросить click , чтобы событие label было перенаправлено my-component click вручную, но это все равно не так приятно, как обычный старый ввод.

2. Вы всегда можете создать функцию в своем компоненте (например, «фокус») и вызвать click: (click)="myComponent.focus()" или добавить новую @Input метку и убедиться, что метка принадлежит компоненту. Извините, я не могу представить себе другого подхода 🙁