详解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 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
微信小程序入门教程
Nov 18 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
koa-router源码学习小结
Sep 07 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
JavaScript流程控制(循环)
Dec 06 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
如何做到多笔资料的同步
2006/10/09 PHP
php 将excel导入mysql
2009/11/09 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
js脚本实现数据去重
2014/11/27 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
react 生命周期实例分析
2020/05/18 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python splitlines使用技巧
2008/09/06 Python
Python 学习笔记
2008/12/27 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
接受捐赠答谢词
2014/01/27 职场文书
服务口号大全
2014/06/11 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
python实现的web监控系统
2021/04/27 Python