web-dev-qa-db-fra.com

angular2 déclenchant manuellement un événement de clic sur un élément particulier

J'essaie de déclencher un événement clic (ou tout autre événement) sur un élément par programmation. En d'autres termes, je souhaite connaître les fonctionnalités similaires à celles proposées par la méthode jQuery .trigger () dans angular2.

Existe-t-il une méthode intégrée pour le faire? ..... sinon, veuillez suggérer comment puis-je faire cela

Considérons le fragment de code suivant 

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

Ici, lorsque l’utilisateur clique sur btnAdd , il doit déclencher l’événement click sur imgFile  

angularangular2-forms
59
Jorin

Angular4

Au lieu de

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

utilisation

    this.fileInput.nativeElement.dispatchEvent(event);

car invokeElementMethod ne fera plus partie du rendu.

Angulaire2

Utilisez ViewChild avec une variable de modèle pour obtenir une référence à l'entrée du fichier, puis utilisez le Renderer pour appeler dispatchEvent afin de déclencher l'événement:

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

Mettre à jour

Étant donné que l’équipe Angular n’est plus en train de décourager l’accès DOM direct, ce code plus simple peut également être utilisé.

this.fileInput.nativeElement.click()

Voir aussi https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

149
Günter Zöchbauer

Je voulais aussi une fonctionnalité similaire où j'ai un File Input Control avec display:none et un Button control où je voulais déclencher un événement click de File Input Control lorsque je clique sur le bouton, en dessous: le code pour le faire

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

aussi simple que cela et ça marche parfaitement ...

21
Akshay Khale

Cela a fonctionné pour moi:

<button #loginButton ...

et à l'intérieur du contrôleur:

@ViewChild('loginButton') loginButton;
...
this.loginButton.getNativeElement().click();
1
Marco C.

La réponse de Günter Zöchbauer est la bonne. Pensez simplement à ajouter la ligne suivante:

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

Dans mon cas, j'aurais une erreur "interceptée RangeError: taille maximale de la pile d'appels dépassée" si ce n'est pas le cas. (J'ai une carte div tirant au clic et le fichier d'entrée à l'intérieur)

1
reneval

Si vous voulez imiter, cliquez sur l'élément DOM comme ceci:

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

et avoir quelque chose comme ça sur la page:

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

votre fonction dans component.ts devrait être comme ceci:

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