angular2 在特定元素上手动触发点击事件 [英] angular2 manually firing click event on particular element

问题描述

我试图以编程方式触发元素上的点击事件(或任何其他事件)，换句话说，我想知道 angular2 中 jQuery .trigger() 方法提供的类似功能.

是否有任何内置方法可以做到这一点?.....如果没有请建议我该怎么做

考虑下面的代码片段

<br><div class="input-field"><input type="file" id="imgFile" (click)="onChange($event)" >

<button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>添加图片</button></表单>

在这里，当用户点击 btnAdd 时，它应该在 imgFile 上触发点击事件

解决方案

Angular4

代替

 this.renderer.invokeElementMethod(this.fileInput.nativeElement, 'dispatchEvent', [事件]);

使用

 this.fileInput.nativeElement.dispatchEvent(event);

因为 invokeElementMethod 将不再是渲染器的一部分.

Angular2

使用带有模板变量的 ViewChild 来获取对文件输入的引用，然后使用 Renderer调用 dispatchEvent 来触发事件:

import { Component, Renderer, ElementRef, ViewChild } from '@angular/core';@成分({...模板:`...<input #fileInput type="file" id="imgFile" (click)="onChange($event)" >...`})类我的组件{@ViewChild('fileInput') fileInput:ElementRef;构造函数(私有渲染器:渲染器){}showImageBrowseDlg() {//来自 http://stackoverflow.com/a/32010791/217408let event = new MouseEvent('click', {bubbles: true});this.renderer.invokeElementMethod(this.fileInput.nativeElement, 'dispatchEvent', [事件]);}}

更新

由于 Angular 团队不再鼓励直接访问 DOM，因此也可以使用更简单的代码

this.fileInput.nativeElement.click()

另见 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

I am trying to fire click event (or any other event) on element programatically , In other word I want to know the similar features as offered by jQuery .trigger() method in angular2.

Is there any built in method to do this? ..... if not please suggest how can i do this

Consider the following code fragment

<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>

Here when user click the btnAdd it should fire the click event on imgFile

解决方案

Angular4

Instead of

    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, 'dispatchEvent', [event]);

use

    this.fileInput.nativeElement.dispatchEvent(event);

because invokeElementMethod won't be part of the renderer anymore.

Angular2

Use ViewChild with a template variable to get a reference to the file input, then use the Renderer to invoke dispatchEvent to fire the event:

import { Component, Renderer, ElementRef, ViewChild } 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]);
  }
}

Update

Since direct DOM access isn't discouraged anymore by the Angular team this simpler code can be used as well

this.fileInput.nativeElement.click()

See also https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

这篇关于angular2 在特定元素上手动触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！