详解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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
js实现翻牌小游戏
Jul 31 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
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python算法题 链表反转详解
2019/07/02 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
在python中修改.properties文件的操作
2020/04/08 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
个人更名证明
2015/06/23 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
Python何绘制带有背景色块的折线图
2022/04/23 Python
Django框架模板用法详解
2022/06/10 Python