angular2 ręcznie wyzwalające zdarzenie kliknięcia na konkretny element

Próbuję programowo wywołać zdarzenie kliknięcia (lub jakiekolwiek inne zdarzenie) na elemencie, innymi słowy, chcę poznać podobne funkcje, jakie oferuje metoda jQuery .trigger () w angular2.

Czy jest jakaś wbudowana metoda, aby to zrobić? ..... jeśli nie, proszę zasugerować, jak mogę to zrobić

Rozważ następujący fragment kodu

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

W tym przypadku, gdy użytkownik kliknie btnAdd , powinno uruchomić zdarzenie click na imgFile

Angular4

Zamiast

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

posługiwać się

    this.fileInput.nativeElement.dispatchEvent(event);

ponieważ invokeElementMethodnie będzie już częścią renderera.

Angular2

Użyj ViewChild ze zmienną szablonu, aby uzyskać odniesienie do wejścia pliku, a następnie użyj modułu renderującego, aby wywołać dispatchEventzdarzenie:

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

Aktualizacja

Ponieważ zespół Angular nie odradza już bezpośredniego dostępu do DOM, ten prostszy kod może być również używany

this.fileInput.nativeElement.click()

Zobacz także https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Chciałem też podobną funkcjonalność, gdzie mam kontrolę plik wejściowy z display:nonei kontroli Przycisk gdzie chciałem wyzwalacza kliknij zdarzenie wejścia pliku kontrolnym po kliknięciu na przycisk poniżej jest kod, aby to zrobić

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

takie proste i działa bez zarzutu ...

To zadziałało dla mnie:

<button #loginButton ...

i wewnątrz kontrolera:

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

Odpowiedź Güntera Zöchbauera jest właściwa. Wystarczy rozważyć dodanie następującego wiersza:

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

W moim przypadku dostałbym błąd „złapany RangeError: maksymalny rozmiar stosu wywołań przekroczony”, jeśli nie. (Mam kartę div uruchamianą po kliknięciu i plik wejściowy w środku)

Jeśli chcesz imitować, kliknij element DOM w ten sposób:

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

i mam na stronie coś takiego:

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

Twoja funkcja w component.tspowinna wyglądać następująco:

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

Aby uzyskać natywne odniesienie do czegoś takiego ion-input, jak , używając tego

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

i wtedy

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