Question

我有一个自定义输入组件的问题，它应该可以替代 <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

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

Answer 1

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

中使用 ViewChild

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

并使用

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

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

1 个答案: