angular2 在特定元素上手动触发点击事件

Question

我正在尝试以编程方式在元素上触发点击事件（或任何其他事件），换句话说，我想知道 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

上的单击事件

Answer 1

Angular4

而不是

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

使用

    this.fileInput.nativeElement.dispatchEvent(event);

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

Angular2

使用ViewChild with a template variable to get a reference to the file input, then use the Renderer调用dispatchEvent触发事件：

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 
    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/en-US/docs/Web/API/EventTarget/dispatchEvent

Answer 2

Günter Zöchbauer 的回答是正确的。只需考虑添加以下行：

showImageBrowseDlg() {
    // from 
    let event = new MouseEvent('click', {bubbles: true});
    event.stopPropagation();
    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, 'dispatchEvent', [event]);
  }

在我的例子中，如果没有，我会得到一个 "caught RangeError: Maximum call stack size exceeded" 错误。（我有一张 div 卡在点击时触发，里面有输入文件）

Answer 3

我也想要类似的功能，其中我有一个带有 display:none 的 文件输入控件 和我想要的 按钮控件 当我点击按钮时触发文件输入控件的 click 事件，下面是执行此操作的代码

<input type="button" (click)="fileInput.click()" class="btn btn-primary" value="Add From File">
<input type="file" style="display:none;" #fileInput/>

就这么简单，而且运行完美...

Answer 4

这对我有用：

<button #loginButton ...

控制器内部：

@ViewChild('loginButton') loginButton;
...
this.loginButton.getNativeElement().click();

Answer 5

如果你想模仿点击这样的DOM元素：

<a (click)="showLogin($event)">login</a>

并且页面上有这样的内容：

<li ngbDropdown>
    <a ngbDropdownToggle id="login-menu">
        ...
    </a>
 </li>

你在component.ts中的函数应该是这样的：

showLogin(event) {
   event.stopPropagation();
   document.getElementById('login-menu').click();
}

Answer 6

要获取对 ion-input 之类的内容的本地引用，请尝试使用此

@ViewChild('fileInput', { read: ElementRef }) fileInput: ElementRef;

然后

this.fileInput.nativeElement.querySelector('input').click()

angular2 在特定元素上手动触发点击事件

angular2 manually firing click event on particular element

angular2-forms

angular