分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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

使用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 https://stackoverflow.com/a/32010791/217408
    let event = new MouseEvent('click',{Bubbles: truE});
    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement,[event]);
  }
}