欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解angular2如何手动点击特定元素上的点击事件

程序员文章站 2022-06-03 11:57:03
我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jquery .trigger()方法提供的类似功能. 有没有内置的方法来做到这...

我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在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

代码日志版权声明:

翻译自:

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