Angular2手动触发特定元素上的单击事件

我试图以编程的方式触发元素上的单击事件(或任何其他事件) ，换句话说，我想知道 jQuery 提供的类似功能。触发器()方法在角2。

有没有什么内置的方法来做到这一点? ... ... 如果没有，请建议我如何做到这一点

考虑下面的代码片段

<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上触发单击事件

146725 次浏览
小开
最佳答案

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

小开

Günter Zöchbauer's answer is the right one. Just consider adding the following line:

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

In my case I would get a "caught RangeError: Maximum call stack size exceeded" error if not. (I have a div card firing on click and the input file inside)

小开

I also wanted similar functionality where I have a File Input Control with display:none and a Button control where I wanted to trigger click event of File Input Control when I click on the button, below is the code to do so

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

as simple as that and it's working flawlessly...

小开

This worked for me:

<button #loginButton ...

and inside the controller:

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

If you want to imitate click on the DOM element like this:

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

and have something like this on the page:

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

your function in component.ts should be like this:

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

To get the native reference to something like an ion-input, ry using this

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

and then

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

提交答案