详解angular2如何手动点击特定元素上的点击事件
时间:2021-04-11 08:58:56|栏目:AngularJS|点击: 次
我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在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://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/de/docs/Web/API/EventTarget/dispatchEvent
代码日志版权声明:
上一篇:Angular2之二级路由详解
栏 目:AngularJS
下一篇:关于angularJs指令的Scope(作用域)介绍
本文标题:详解angular2如何手动点击特定元素上的点击事件
本文地址:http://www.codeinn.net/misctech/99317.html