如何使用Angular在输入元素上调用click事件

Question

我由于不想使用HTML上传按钮而试图创建一个上传按钮，如何在输入元素上调用click事件以手动打开文件浏览器？

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

Answer 1

我会在视图中使用＃装饰器来完成此操作。这样，我们可以给输入一个名称，然后只需调用name.click（）即可从一个按钮调用它，例如：

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

根据文档的＃：“创建一个局部变量，该变量提供对当前模板中数据绑定和事件绑定表达式中元素实例的访问。” Cheatsheet

Answer 2

只要按一下我的理解，它就会起作用：

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

希望有帮助！

Answer 3

当click单击时，file input上的div is：

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