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

Question

我正在尝试制作一个上传按钮，因为我不想使用 HTML 上传按钮，如何在输入元素上调用单击事件来手动打开文件浏览器？

<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">

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

Answer 2

只需单击即可使其按我的理解工作：

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

希望能帮助到你！