详解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 学习初步 入门教程
Mar 25 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 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
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
python使用psutil模块获取系统状态
2016/08/27 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
安全环保演讲稿
2014/08/28 职场文书
消防安全主题班会
2015/08/12 职场文书
辅导员学期工作总结
2015/08/14 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python