angular2手动触发特定元素上的click事件

Question

我试图以编程方式触发元素上的click事件(或任何其他事件),换句话说,我想知道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上的click事件

Answer 1

Angular4

代替

    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, 'dispatchEvent', [event]);

使用

    this.fileInput.nativeElement.dispatchEvent(event);

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

Angular2

将ViewChild与模板变量一起使用以获取对文件输入的引用,然后使用Renderer调用dispatchEvent以触​​发事件:

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

更新

由于Angular团队不再支持直接DOM访问,因此也可以使用这种更简单的代码

this.fileInput.nativeElement.click()

另见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Answer 2

我也希望类似的功能,在那里我有一个文件输入控制与display:none和按钮控制,我想触发点击事件文件输入控制,当我按一下按钮,下面是代码这样做

<input type="button" (click)="fileInput.click()" class="btn btn-primary" value="Add From File">
<input type="file" style="display:none;" #fileInput/>

就这么简单,它的工作完美无缺......