webentwicklung-frage-antwort-db.com.de

angle2 löst manuell ein Klickereignis für ein bestimmtes Element aus

Ich versuche, ein Klickereignis (oder ein beliebiges anderes Ereignis) programmgesteuert auszulösen. In anderen Worten möchte ich die ähnlichen Funktionen kennen, die von der jQuery .trigger () - Methode in angle2 angeboten werden.

Gibt es eine eingebaute Methode, um dies zu tun? ..... wenn nicht, bitte machen Sie mir einen Vorschlag

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 hier auf das btnAdd klickt, sollte das Klickereignis auf imgFile ausgelöst werden. 

59
Jorin

Angular4

Anstatt

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

benutzen

    this.fileInput.nativeElement.dispatchEvent(event);

weil invokeElementMethod nicht mehr Teil des Renderers ist.

Angular2

Verwenden Sie ViewChild mit einer Vorlagenvariablen, um einen Verweis auf die Dateieingabe zu erhalten, und verwenden Sie dann den Renderer , um dispatchEvent aufzurufen, um 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]);
  }
}

Update

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

this.fileInput.nativeElement.click()

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

149

Ich wollte auch eine ähnliche Funktionalität, bei der ich ein File Input Control mit display:none und ein Button Control habe, bei dem ich click event von File Input Control auslösen wollte, wenn ich auf den Button klicke, unten der Code dazu

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

so einfach ist das und es funktioniert einwandfrei ...

21
Akshay Khale

Das hat für mich funktioniert:

<button #loginButton ...

und im Controller:

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

Die Antwort von Günter Zöchbauer ist richtig. 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 eine Fehlermeldung erhalten, dass "RangeError: Maximale Aufrufstackgröße überschritten wurde" angezeigt wird. (Ich habe eine Div-Karte beim Klicken und die Eingabedatei drin)

1
reneval

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

<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.ts sollte so aussehen:

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