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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angular中实现li或者某个元素点击变色的两种方法

    本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo

  • angularjs下ng-repeat点击元素改变样式的实现方法

    1.一个angularjs的学习,了解ng-class的使用技巧: 2.代码: html: <div ng-repeat='myimg in myimgs'> <img ng-src="{{myimg}}" ng-click="fabricChoose($index)" ng-class="{fabricImg1:$index==fabricIsSelected}"> </div> css: .fabricIm

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

    我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能. 有没有内置的方法来做到这一点? -..如果不是,请建议我该怎么做 考虑以下代码片段 <form [ngFormModel]="imgUploadFrm" (ngSubmit)="onSubmit(imgUploadFrm)"> <br> <div class="input-field

  • IDEA SpringBoot项目配置热更新的步骤详解(无需每次手动重启服务器)

    IDEA SpringBoot项目配置热更新的步骤 1.在pom.xml中添加依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> 2.在pom.xml中添加插件: <

  • 详解Vue ElementUI手动上传excel文件到服务器

    详解Vue ElementUI手动上传excel文件到服务器

    概述 具体需求场景如下: 选择excel文件后,需要把导入的excel文件手动上传到后台服务器,并将导入成功后的统计结果显示出来.官网也有手动上传的示例,通过 action="url" 传入地址的方式,但在实际项目中请求需要自己配置,下面具体说明实现的方法. 说明: 在上传文件到展示统计结果,我们后端给了两个接口:首先调用文件上传接口,上传成功后,根据后端返回的mark再调用统计结果接口. 属性设置 .vue文件 <el-row> <div class="e

  • 详解Angular2中的编程对象Observable

    详解Angular2中的编程对象Observable

    前言 RxJs提供的核心是Observable对象,它是一个使用可观察数据序列实现组合异步和事件编程. 跟这个很类似的异步编程模型是Promise,Promise是基于状态变化的异步模型,一旦由等待状态进入成功或失败状态便不能再次修改,当状态变化时订阅者只能够拿到一个值:而Observable是基于序列的异步编程模型,随着序列的变化,订阅者可以持续不断的获取新的值.而且Promise只提供回话机制,并没有更多的操作来支持对结果的复杂处理,而Observable提供了多种多样的操作符,来处理运算结

  • 详解Java8合并两个Map中元素的正确姿势

     1. 介绍 本入门教程将介绍Java8中如何合并两个map. 更具体说来,我们将研究不同的合并方案,包括Map含有重复元素的情况. 2. 初始化 我们定义两个map实例 private static Map<String, Employee> map1 = new HashMap<>(); private static Map<String, Employee> map2 = new HashMap<>(); Employee类 public class

  • 详解MybatisPlus集成nacos导致druid连接不上数据库

    问题 mp加密与druid和nacos结合,首次项目启动成功,后续访问无法连接数据库 导致原因 项目首次加载由于会去nacos读取一遍配置,刚好mp启动的时候也会去读取配置好key值,所以启动的时候不会报错 由于nacos有自动刷新配置功能,后面自动刷新的时候mp不会再读取命令行配置key,导致无法解密,从而连接数据库失败 解决方案 知道原因之后,我们可以修改druid连接数据库的配置,因为druid自带数据库加解密,参考ConfigFilter类就可以知道,druid会去读取外部的配置文件,可

  • 详解Visual Studio使用Git忽略不想上传到远程仓库的文件

    前言: 作为一个.NET开发者而已,有着宇宙最强IDE:Visual Studio加持,让我们的开发效率得到了更好的提升.我们不需要担心环境变量的配置和其他代码管理工具,因为VS有丰富的拓展工具.废话不多说,直接进入正题.我们日常在使用VS开发相关的.NET项目时,经常会发现刚拉取下拉的代码什么都没有改动,就是运行了一下就会产生一些需要提交的文件,比如说最常见的bin/Debug, bin/Release,obj/Debug,obj/Release文件.但是我不想把这些文件提交到远程的git代码

  • 详解WPF双滑块控件的使用和强制捕获鼠标事件焦点

    详解WPF双滑块控件的使用和强制捕获鼠标事件焦点

    目录 效果 概述 代码部分 效果 概述 最近有个小需求要用双滑块表示一个取值范围,于是就简单做了个用户控件,在此记录下. 使用矩形Rectangle表示范围,椭圆Ellipse表示滑块,使用Canvas控制滑块的左右移动. 椭圆的鼠标按下事件里强制获取鼠标事件焦点,避免移动过快或移出控件范围时,滑块就不跟着跑了.椭圆的鼠标抬起事件释放强制获取鼠标事件焦点 代码部分 需求比较简单,只定义了4个依赖属性,范围的最大值和最小值,取值的最大值和最小值. 接下来就是计算滑块和高亮矩形的位置,计算时注意减去

  • 详解SpringMVC中的日期处理和文件上传操作

    详解SpringMVC中的日期处理和文件上传操作

    目录 日期格式处理 日期格式处理 创建自定义日期转换器 配置自定义转换器 文件上传下载 文件上传 文件下载 日期格式处理 在控制器中使用对象接收数据 前端: <form action="test/add" method="post"> <p>图书名称:<input type="text" name="bookName"/></p> <p>图书作者:<input

  • 详解Golang如何实现支持随机删除元素的堆

    详解Golang如何实现支持随机删除元素的堆

    目录 背景 原理 数据结构 随机访问 删除 map里面的元素index维护 Golang实现 数据结构 移除堆顶元素 添加元素 移除元素 push().pop()和swap() 时间复杂度 总结 背景 堆是一种非常常用的数据结构,它能够支持在O(1)的时间复杂度获取到最大值(或最小值),因此我们经常在需要求最值的场景使用它. 然而普通堆它有一个缺点,它没办法快速的定位一个元素,因此它也没办法快速删除一个堆中元素,需要遍历整个堆去查询目标元素,时间复杂度是O(n),因为堆的结构在逻辑上是这样的:

随机推荐