处理 Angular 中自定义输入组件的标签点击

我有一个自定义输入组件的问题,它应该可以替代 <input>。除了点击以我的组件为目标的 <label> 的工作方式外,一切正常。阅读 docs on label 时,我希望在单击标签时在我的组件上收到 click 事件,但我什么也没收到。

即我的 HTML 如下所示:

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

my-component 是一个为 @HostListener 实现 click 的组件。我现在遇到的问题是 click 处理程序永远不会通过单击 label 触发,如果我直接单击组件,它当然可以工作。我如何对在组件内点击的标签做出反应,以便我可以手动将其转发到我的组件内的 input

我在这里创建了一个示例项目:https://github.com/Anteru/ng-component-focus-test

我想要的行为是两个标签的工作方式相同,即点击标签聚焦输入。对于用户来说,如果他们使用“普通的旧”输入或我喜欢的组件,这应该没有区别。

kk5522kk 回答:处理 Angular 中自定义输入组件的标签点击

我不知道是否有更好的方法,但您始终可以在 my-component

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

并使用

<label (click)="myComponent.myInput.nativeElement.focus()">Hello</label>
<my-component #myComponent ></my-component>
本文链接:https://www.f2er.com/664.html

大家都在问