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

 更新时间:2018年10月16日 11:33:38   作者:代码日志  
这篇文章主要介绍了详解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

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

相关文章

  • AngularJS指令详解及示例代码

    AngularJS指令详解及示例代码

    本文主要介绍AngularJS指令,这里整理了简单的指令并附示例代码,有需要的小伙伴可以参考下
    2016-08-08
  • Angular网络请求的封装方法

    Angular网络请求的封装方法

    本篇文章主要介绍了Angular网络请求的封装方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • BootStrap+Angularjs+NgDialog实现模式对话框

    BootStrap+Angularjs+NgDialog实现模式对话框

    在完成一个后台管理系统时,需要用表格显示注册用户的信息。但是用户地址太长了,不好显示。所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址。下面小编给大家分享下实现方法,一起看下吧
    2016-08-08
  • angularJS开发注意事项

    angularJS开发注意事项

    本篇文章给大家分享了angularJS开发注意事项以及相关知识点,对此有兴趣的朋友参考学习下。
    2018-05-05
  • angularjs实现多选框分段全选效果实现

    angularjs实现多选框分段全选效果实现

    这篇文章主要为大家介绍了angularjs实现多选框分段全选效果实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 详解Angular动态组件

    详解Angular动态组件

    本文主要介绍了Angular动态组件,对此感兴趣的同学,可以亲自实验一下。
    2021-05-05
  • Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解

    我们在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。本文将介绍Angular.js中处理页面闪烁的方法。
    2017-03-03
  • Angular模版驱动表单的使用总结

    Angular模版驱动表单的使用总结

    这篇文章主要介绍了Angular模版驱动表单的使用总结,本文实现了Angular支持表单的双向数据绑定,校验,状态管理,非常具有实用价值,需要的朋友可以参考下
    2018-05-05
  • AngulaJS路由 ui-router 传参实例

    AngulaJS路由 ui-router 传参实例

    本篇文章主要介绍了AngulaJS路由 ui-router 传参实例 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • angular实现IM聊天图片发送实例

    angular实现IM聊天图片发送实例

    本篇文章主要介绍了angular实现IM聊天图片发送实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论