angular2 मैन्युअल रूप से विशेष तत्व पर क्लिक इवेंट फायरिंग

Question

मैं प्रोग्राम पर तत्व पर क्लिक करने की घटना (या किसी अन्य घटना) को आग लगाने की कोशिश कर रहा हूं, दूसरे शब्द में मुझे कोणीय 2 में jQuery .trigger () विधि द्वारा दी गई समान विशेषताओं को जानना चाहते हैं।

क्या ऐसा करने के लिए कोई विधि निर्मित है? ..... यदि नहीं तो कृपया सुझाव दें कि मैं यह कैसे कर सकता हूं

निम्नलिखित कोड के टुकड़े पर विचार करें

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

जब उपयोगकर्ता btnAdd पर क्लिक करता है तो उसे imgFile पर क्लिक ईवेंट को फायर करना चाहिए

Comments

आपको केवल imgFile.click()इसके बजाय आवश्यकता है showImageBrowseDlg()अगर आप नीचे दिए गए उत्तर का पालन करें @ akshay-khale stackoverflow.com/a/41675017/344029 (चर जोड़ने के बाद <input #imgFile)

— DJDaveMark

Answer 1

कोणीय ४

के बजाय

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

उपयोग

    this.fileInput.nativeElement.dispatchEvent(event);

क्योंकि invokeElementMethodअब रेंडरर का हिस्सा नहीं होगा।

कोणीय २

फ़ाइल इनपुट का संदर्भ पाने के लिए टेम्प्लेट चर के साथ ViewChild का उपयोग करें , फिर इवेंट को फायर करने के लिए रेंडरर का उपयोग करें dispatchEvent:

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

अपडेट करें

चूंकि डायरेक्ट डोम एक्सेस को एंगुलर टीम द्वारा कभी भी हतोत्साहित नहीं किया जाता है, इसलिए इस सरल कोड का भी उपयोग किया जा सकता है

this.fileInput.nativeElement.click()

Https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent भी देखें

Comments

this.fileInput.nativeElement.click()यह भी लगता है काम करता है।

— lbrahim

@lbrahim यह सही है। उस समय इसके बजाय गुणों या तरीकों के nativeElementउपयोग से बचने के लिए यह एक मजबूत सुझाव था Renderer। मुझे लगता है कि यह हाल ही में काफी बदल गया है और प्रत्यक्ष डोम का उपयोग अब ठीक है, लेकिन यह सर्वर साइड रेंडरिंग और वेबवर्क के साथ काम नहीं करेगा।

— गुंटर ज़ोचबॉयर

@AralRoca तो उपयोग @ViewChildren('fileInput') QueryList<ElementRef>;भी देखें stackoverflow.com/questions/32693061/…

— गुंटर ज़ोचबॉयर

मुझे इस बारे में पूरी तरह से यकीन नहीं है और मैंने इसका उल्लेख करने वाले आधिकारिक डॉक्स नहीं देखे हैं, लेकिन जहां तक ​​मुझे याद है कि इसका उल्लेख कुछ गीताप्रेस के मुद्दों में किया गया था। मैं यह भी याद रखना चाहता हूं कि रेंडर को हटाने और डायरेक्ट डोम एक्सेस का उपयोग करने के लिए कुछ डॉक्टर उदाहरण अपडेट किए गए थे। मुझे आभास हुआ अगर आप सर्वर-साइड-रेंडरिंग या वेब-वर्कर्स का उपयोग करने का इरादा नहीं रखते हैं, तो यह सिर्फ एक बोझिल सीमा है और काफी डेवलपर्स इस बात की परवाह नहीं करते हैं और इस तरह से वे इसे बनाने से दूर हो जाते हैं। मजबूत नियम।

— गुंटर ज़ोचबॉयर

@ ManuChadha jquery का उपयोग क्यों करते हैं? यह उन मुद्दों को जन्म दे सकता है जब कोणीय और jquery को लगता है कि वे दोनों FOM के पूर्ण कंटोल में हैं। jquery हाल ही में बहुत कम प्रासंगिक हो गई है क्योंकि ब्राउज़रों के बीच मतभेद बहुत कम हैं और पुराने ब्राउज़रों के लिए समर्थन पूरी तरह से सबसे अधिक गिरा दिया गया था।

— गुन्टर ज़ोचबॉयर

Answer 2

मैं भी जहां मैं एक है इसी तरह की सुविधा चाहता था फ़ाइल इनपुट नियंत्रण के साथ display:noneऔर एक बटन नियंत्रण जहाँ मैं ट्रिगर करने के लिए चाहता था क्लिक करें घटना जब मैं बटन पर क्लिक करें फ़ाइल इनपुट नियंत्रण के लिए, नीचे ऐसा करने के लिए कोड है

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

के रूप में सरल है कि और यह निर्दोष रूप से काम कर रहा है ...

Comments

मैं एक पाठ क्षेत्र में प्रवेश करने के बाद बटन को क्लिक करने के लिए वास्तव में इसका उपयोग करता था:<input #name type="text" (keyup.enter)="addBtn.click()"> <button #addBtn (click)="add(name.value)" type="button">Add</button>

— DJDaveMark

Answer 3

यह मेरे लिए काम किया:

<button #loginButton ...

और नियंत्रक के अंदर:

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

Comments

धन्यवाद यार। यह आयनिक 3 के साथ एक आकर्षण की तरह काम करता था। :)

— डवलरथोड

Answer 4

गुंटर ज़ोचबॉयर का जवाब सही है। बस निम्नलिखित पंक्ति जोड़ने पर विचार करें:

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

मेरे मामले में मुझे "पकड़ा गया रेंजर्रर: अधिकतम कॉल स्टैक आकार पार हो गया" यदि नहीं तो त्रुटि। (मेरे पास क्लिक पर एक डिव कार्ड फायरिंग और अंदर इनपुट फ़ाइल है)

Comments

आप "बुलबुले" कुंजी को भी गलत पर सेट कर सकते हैं जो ईवेंट को प्रमुख पेड़ को बुदबुदाने से रोकता है

— ChicoDelaBarrio

Answer 5

यदि आप इस तरह DOM तत्व पर क्लिक करना चाहते हैं:

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

और पृष्ठ पर कुछ इस तरह है:

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

आपका कार्य component.tsइस तरह होना चाहिए:

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

Answer 6

देशी संदर्भ प्राप्त करने के लिए किसी चीज़ की तरह ion-input, इस का उपयोग करके ry

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

और फिर

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

Comments

आपको बहुत - बहुत धन्यवाद! मैं अपना सिर इओनिक में काम करने की कोशिश में कर रहा था। चीयर्स

— fromage9747

आपका स्वागत है

— davejoem