Angular2如何触发（点击）事件答案

【问题标题】：Angular2 How to trigger (click) eventAngular2如何触发（点击）事件
【发布时间】：2018-11-23 02:15:09
【问题描述】：

我有一个div 和ion-input #fileInput type="file" accept="image/*" id="fileInput" [(ngModel)]="imageFilePath" (ionChange)="imageFilePath_change($event)" ></ion-input>

如何使用div模拟点击ion-input组件？

我的html代码是：

<div (click) = "fileInput.click()">
    <img src="assets/img/camera_button.png" [ngStyle]="{'position': 'fixed', 'top': '30vw', 'left': '32vw', 'height': '30px', 'color': '#0080FF'}">
    <ion-input #fileInput type="file" accept="image/*" id="fileInput" [(ngModel)]="imageFilePath" (ionChange)="imageFilePath_change($event)" ></ion-input>
    <span [ngStyle]="{'position': 'fixed', 'top': '32vw', 'left': '42vw', 'color': '#0080FF'}">{{ 'addMorePhotosBtn' | translate }}</span>
</div>

错误是：

TypeError: jit_nodeValue_20(...).click is not a function

【问题讨论】：

<ion-input (click) ... ?
不，我在 div 中模拟离子输入的点击
您的#fileInput 所以ion-input 没有名为click 的函数
为什么需要点击输入？为什么不直接从原来的点击事件处理器中调用组件方法呢？
请你写一个简单的例子好吗？

标签： html angular ionic2

【解决方案1】：

这是我在单击 div 时对文件的工作示例。

HTML 文件

 <ion-list>
       <ion-item (click)="onImageClick()">
           <div>
              <ion-icon ios="ios-add-circle" md="md-add-circle"></ion-icon>
                  Add Files
              </div>
       </ion-item>
   </ion-list>

打字稿文件

public onImageClick() {

    let input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*'); //you can change also file type as **'file/*'**
    input.setAttribute("multiple", ""); // If you dont want multiple select file pls remove this line

    input.addEventListener('change', (event: any) => {      
      let fileList: File[] = event.target.files;
      console.log("File List Object Value",fileList);
    });

    input.click();
  }

经过测试，非常适合我。

【讨论】：