angular2手動點選特定元素上的點選事件

我試圖在元素上程式設計點選點選事件(或任何其他事件),換句話說,我想知道在angular2中由jQuery .trigger()方法提供的類似功能.

有沒有內建的方法來做到這一點？ …..如果不是,請建議我該怎麼做

考慮以下程式碼片段

<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);

因為invokeElementMethod不再是渲染器的一部分.

Angular2

使用ofollow,noindex" target="_blank">ViewChild 與模板變數來獲取對檔案輸入的引用,然後使用Renderer 呼叫dispatchEvent來觸發事件：

import { Component, Renderer, ElementRef } 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 MouseEvent('click', {bubbles: true});
this.renderer.invokeElementMethod(
this.fileInput.nativeElement, 'dispatchEvent', [event]);
}
}

更新

由於Angular團隊不再勸阻直接的DOM訪問,所以也可以使用更簡單的程式碼

this.fileInput.nativeElement.click()

參見API/EventTarget/dispatchEvent" rel="nofollow,noindex" target="_blank">https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent