angle2 manuell Klickereignis auf ein bestimmtes Element auslösen

Ich versuche, das Klickereignis (oder ein anderes Ereignis) programmgesteuert auf ein Element auszulösen. Mit anderen Worten, ich möchte die ähnlichen Funktionen kennen, die die Methode jQuery .trigger () in angle2 bietet.

Gibt es eine eingebaute Methode, um dies zu tun? ..... wenn nicht, bitte vorschlagen, wie ich das machen kann

Betrachten Sie das folgende Codefragment

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

Wenn der Benutzer auf btnAdd klickt , sollte das Klickereignis auf imgFile ausgelöst werden

Angular4

Anstatt

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

verwenden

    this.fileInput.nativeElement.dispatchEvent(event);

weil invokeElementMethodnicht mehr Teil des Renderers sein wird.

Angular2

Verwenden Sie ViewChild mit einer Vorlagenvariablen, um einen Verweis auf die Dateieingabe abzurufen , und rufen Sie dann mit dem Renderer auf, dispatchEventum das Ereignis auszulösen :

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

Aktualisieren

Da der direkte DOM-Zugriff vom Angular-Team nicht mehr entmutigt wird, kann auch dieser einfachere Code verwendet werden

this.fileInput.nativeElement.click()

Siehe auch https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Ich wollte auch eine ähnliche Funktionalität , wo ich eine haben Datei - Input Control mit display:noneund ein Button - Steuerelement , wo ich Trigger wollte Click - Ereignis von Datei - Input Control , wenn ich auf den Button klicken, unten ist der Code zu tun,

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

so einfach und das funktioniert einwandfrei ...

Das hat bei mir funktioniert:

<button #loginButton ...

und im Controller:

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

Die Antwort von Günter Zöchbauer ist die richtige. Fügen Sie einfach die folgende Zeile hinzu:

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 meinem Fall würde ich den Fehler "Abgefangener RangeError: Maximale Aufrufstapelgröße überschritten" erhalten, wenn nicht. (Ich habe eine Div-Karte, die beim Klicken ausgelöst wird, und die Eingabedatei darin)

Wenn Sie imitieren möchten, klicken Sie wie folgt auf das DOM-Element:

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

und so etwas auf der Seite haben:

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

Ihre Funktion in component.tssollte wie folgt sein:

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

Um den nativen Verweis auf so etwas wie ein zu erhalten ion-input, verwenden Sie dies

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

und dann

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