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
angular
angular2-forms
Jorin
quelle
quelle
imgFile.click()
statt,showImageBrowseDlg()
wenn Sie der folgenden Antwort von @ akshay-khale stackoverflow.com/a/41675017/344029 (nach dem Hinzufügen der Variablen<input #imgFile
)Antworten:
Angular4
Anstatt
this.renderer.invokeElementMethod( this.fileInput.nativeElement, 'dispatchEvent', [event]);
verwenden
this.fileInput.nativeElement.dispatchEvent(event);
weil
invokeElementMethod
nicht 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,
dispatchEvent
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]); } }
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
quelle
this.fileInput.nativeElement.click()
funktioniert anscheinend auch.nativeElement
undRenderer
stattdessen zu verwenden. Ich denke, dies hat sich in letzter Zeit ziemlich geändert und der direkte DOM-Zugriff ist jetzt in Ordnung, aber es funktioniert nicht mit serverseitigem Rendering und WebWorkern.@ViewChildren('fileInput') QueryList<ElementRef>;
Siehe auch stackoverflow.com/questions/32693061/…Ich wollte auch eine ähnliche Funktionalität , wo ich eine haben Datei - Input Control mit
display:none
und 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,so einfach und das funktioniert einwandfrei ...
quelle
<input #name type="text" (keyup.enter)="addBtn.click()"> <button #addBtn (click)="add(name.value)" type="button">Add</button>
Das hat bei mir funktioniert:
und im Controller:
quelle
Die Antwort von Günter Zöchbauer ist die richtige. Fügen Sie einfach die folgende Zeile hinzu:
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)
quelle
Wenn Sie imitieren möchten, klicken Sie wie folgt auf das DOM-Element:
und so etwas auf der Seite haben:
Ihre Funktion in
component.ts
sollte wie folgt sein:quelle
Um den nativen Verweis auf so etwas wie ein zu erhalten
ion-input
, verwenden Sie diesund dann
quelle