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


Posted in Javascript onOctober 16, 2018

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

代码日志版权声明:

翻译自:http://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element

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

Javascript 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
iView框架问题整理小结
Oct 16 #Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 #Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 #Javascript
ajax与jsonp的区别及用法
Oct 16 #Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 #Javascript
QRCode.js二维码生成并能长按识别
Oct 16 #Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
You might like
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
javascript 写类方式之七
2009/07/05 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
python求最大值最小值方法总结
2019/06/25 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
预备党员表决心书
2014/03/11 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
护士节慰问信
2015/02/15 职场文书
七年级上册生物的课件
2019/08/07 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python