详解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连接access数据库的方法
Nov 17 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
JavaScript 中的 this 简单规则
Sep 19 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 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
长波有什么东西
2021/03/01 无线电
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php把session写入数据库示例
2014/02/26 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
网页javascript精华代码集
2007/01/24 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
详解JavaScript中的强制类型转换
2019/04/15 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python打印斐波拉契数列实例
2015/07/07 Python
python简单文本处理的方法
2015/07/10 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
一名老师的自我评价
2014/02/07 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书