如何使用Angular调用输入元素上的单击事件

我正在尝试创建上载按钮，因为我不想使用HTML上载按钮，如何调用输入元素上的单击事件来手动打开文件浏览器

<div class="upload-button button" (click)="selectFile()">
   Upload
   <input type="file">
</div>

上传

单击

div时，只需单击
文件上的
输入
：

<div class="upload-button button" click="document.getElementById('fileUploader').click();">
   Upload
   <input type="file" id="fileUploader">
</div>


上传
仅需单击即可使其按照我的理解工作：



上传
我会用视图中的装饰器来完成。这样，我们可以给输入一个名称，然后只调用名称。单击（）可从按钮调用它，例如：

<button (click)="fileSelect.click()">Click me for fun!</button>
<input style="display: none" #fileSelect type="file">

点击我玩！

#根据文档：“创建一个局部变量，用于访问当前模板中数据绑定和事件绑定表达式中的元素实例。”
参见此示例：否，如果单击文本上载，则不会打开文件选择器。click=“file”没有任何意义。@LajosArpad，谢谢您的评论。根据我的理解，我已经更新了代码片段。这仍然是不正确的。文件在该上下文中没有任何意义。您只需要找到输入，可能是通过id，请参阅我的答案。@LajosArpad，好的。再次感谢。上面的方法会起作用，但在Angular中这不是通常的方法，因为它直接操作DOM并超出Angular框架。如果组件在页面上多次使用，也会带来一些风险。假设上面是一个组件，我们有一个表单使用它n次。使用dom查询，很可能会得到很多hits@Stol谢谢你解释投票失败的原因。