Html Angular2如何触发(单击)事件
我有一个Html Angular2如何触发(单击)事件,html,angular,ionic2,Html,Angular,Ionic2,我有一个div和ioninput 35; fileInput type=“file”accept=“image/*”id=“fileInput”[(ngModel)]=“imageFilePath”(ionChange)=“imageFilePath\u change($event)”> 如何使用div模拟点击离子输入组件 我的html代码是: <div (click) = "fileInput.click()"> <img src="assets/img/camera
div
和ioninput 35; fileInput type=“file”accept=“image/*”id=“fileInput”[(ngModel)]=“imageFilePath”(ionChange)=“imageFilePath\u change($event)”>
如何使用div
模拟点击离子输入
组件
我的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>
下面是单击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>
对我来说,这是一个完美的测试。
否我在一个分区中模拟离子输入的点击你的#fileInput
因此离子输入
没有名为点击
的功能为什么你需要点击输入?为什么不直接从原始的click事件处理程序调用组件方法呢?请你写一个简单的例子?
<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();
}