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

【问题标题】：Handling clicks on label for custom input component in Angular处理Angular中自定义输入组件的标签点击
【发布时间】：2021-08-03 03:45:54
【问题描述】：

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

即我的 HTML 如下所示：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

并使用

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

【讨论】：

这里的问题是我的组件的客户端不知道我的组件中的输入元素是什么，所以这比我想的要复杂得多。我想我可以要求将标签 click 事件手动转发到 my-component 的 click，但这仍然不如普通的旧输入。
您总是可以在您的组件中创建一个函数（例如，称为“焦点”）并调用点击：(click)="myComponent.focus()" 或添加一个新的@Input 标签并使该标签属于该组件。对不起，我无法想象另一种方法:(