详解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 http://*.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/de/docs/web/api/eventtarget/dispatchevent

代码日志版权声明：

翻译自：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。