angular2 activando manualmente un evento de clic en un elemento en particular

Estoy tratando de disparar click event (o cualquier otro evento) en element programáticamente , En otras palabras, quiero conocer las características similares que ofrece jQuery .método trigger () en angular2.

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

Considere el siguiente fragmento de código 

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

Aquí cuando el usuario haga clic en el btnAdd debería disparar el evento de clic en imgFile

Author: Günter Zöchbauer, 2016-04-15
Source

5 answers

Angular4

En lugar de 

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

Use 

    this.fileInput.nativeElement.dispatchEvent(event);

Porque invokeElementMethod ya no formará parte del renderizador.

Angular2

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

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

Dado que el acceso directo al DOM ya no está desaconsejado por el equipo Angular, este código más simple se puede usar como bien 

this.fileInput.nativeElement.click()

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

 140
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-12 20:17:20

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 haga clic en el evento del Control de entrada de archivo cuando hago clic en el botón, a continuación se muestra el código para hacerlo 

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

Tan simple como eso y está funcionando sin problemas...

 20
Author: Akshay Khale,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-16 11:08:53

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 "rango capturado: Tamaño máximo de pila de llamadas excedido" si no. (Tengo una tarjeta div disparando al hacer clic y el archivo de entrada dentro)

 1
Author: reneval,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-01 14:01:05

Esto funcionó para mí:

<button #loginButton ...

Y dentro del controlador:

@ViewChild('loginButton') loginButton;
...
this.loginButton.getNativeElement().click();
 1
Author: Marco C.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-23 11:36:59

Si desea imitar, haga clic en el elemento DOM de esta manera: 

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

Y tener algo como esto en la página:

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

Su función en component.ts debe ser así: 

showLogin(event) {
   event.stopPropagation();
   document.getElementById('login-menu').click();
}
 0
Author: Rammgarot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-03 09:04:49