angular2 disparando manualmente el evento de clic en un elemento en particular

Estoy intentando disparar el evento de clic (o cualquier otro evento) en el elemento programáticamente. En otras palabras, quiero saber las características similares que ofrece el método jQuery .trigger () en angular2.

¿Hay algún método incorporado para hacer esto? ….. si no, por favor sugiero cómo puedo hacer esto

Considere el siguiente fragmento de código


Aquí, cuando el usuario hace clic en btnAdd , debe activar el evento click en imgFile

Angular4

En lugar de

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

utilizar

  this.fileInput.nativeElement.dispatchEvent(event); 

porque invokeElementMethod ya no será parte del renderizador.

Angular2

Use ViewChild con una variable de plantilla para obtener una referencia a la entrada del archivo, luego use el Renderer para invocar a dispatchEvent para activar el evento:

 import { Component, Renderer, ElementRef, ViewChild } from '@angular/core'; @Component({ ... template: ` ...  ...` }) 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]); } } 

Actualizar

Como el equipo Angular ya no desaconseja el acceso directo al DOM, este código más simple también se puede usar

 this.fileInput.nativeElement.click() 

Ver también https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

También quería una funcionalidad similar donde tengo un control de entrada de archivo con display:none y un control de botón donde quería activar el evento de clic de File Input Control cuando hago clic en el botón, a continuación se muestra el código para hacerlo

   

tan simple como eso y está funcionando sin problemas …

La respuesta de Günter Zöchbauer es la correcta. Simplemente considere agregar la siguiente línea:

 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]); } 

En mi caso, obtendría un error de “RangeError capturado: el tamaño máximo de la stack de llamadas excedido” si no fuera así. (Tengo una tarjeta div activando el clic y el archivo de entrada dentro)

Esto funcionó para mí:

 

y dentro del controlador:

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

Si quiere imitar, haga clic en el elemento DOM así:

 login 

y tenga algo como esto en la página:

 
  • ...
  • su función en component.ts debería ser así:

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