我正在try 以编程方式在元素上触发单击事件(或任何其他事件)，换句话说，我想知道与angular2中的jQuery.rigger()方法提供的类似功能.
有没有内置的方法可以做到这一点呢？如果没有，请建议我如何做到这一点
考虑下面的代码片段
<form [ngFormModel]="imgUploadFrm"
(ngSubmit)="onSubmit(imgUploadFrm)">
<br>
<div class="input-field">
<input type="file" id="imgFile" (click)="onChange($event)" >
</div>
<button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button>
</form>
在这里，当用户点击btnAdd时，它应该在imgFile上触发点击事件
Angular4
而不是
this.renderer.invokeElementMethod(
this.fileInput.nativeElement, 'dispatchEvent', [event]);
使用
this.fileInput.nativeElement.dispatchEvent(event);
beca使用 invokeElementMethod won't be part of the renderer anymore.
Angular2个
Use ViewChild with a template variable to get a reference to the file input, then 使用 the Renderer to invoke dispatchEvent to fire the event:
import { Component, Renderer, ElementRef, ViewChild } from '@angular/core';
@Component({
...
template: `
...
<input #fileInput type="file" id="imgFile" (click)="onChange($event)" >
...`
})
class MyComponent {
@ViewChild('fileInput') fileInput:ElementRef;
constructor(private renderer:Renderer) {}
showImageBrowseDlg() {
// from http://stackoverflow.com/a/32010791/217408
let event = new Mo使用Event('click', {bubbles: true});
this.renderer.invokeElementMethod(
this.fileInput.nativeElement, 'dispatchEvent', [event]);
}
}
Update个
Since direct DOM access isn't discouraged anymore by the Angular team this simpler code can be 使用d as well
this.fileInput.nativeElement.click()
另见第https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent页