Angular2 पर क्लिक करें तत्व आईडी

Question

मेरे पास ऐसे क्लिक इवेंट हैं

 <button (click)="toggle($event)" class="someclass" id="btn1"></button>
 <button (click)="toggle($event)" class="someclass" id="btn2"></button>

मैं अपने फ़ंक्शन इनपुट परम में घटना को पकड़ रहा हूं और यह पता लगाना चाहता हूं कि वास्तव में क्या बटन क्लिक किया गया था।

toggle(event) {

}

लेकिन eventएक idसंपत्ति नहीं है ।

altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 1198
clientY: 29
ctrlKey: false
currentTarget: button#hdrbtn_notificaton.mdl-button.mdl-js-button.mdl-js-ripple-effect.mdl-button--icon
defaultPrevented: false
detail: 1
eventPhase: 3
fromElement: null
isTrusted: true
isTrusted: true
layerX: -566
layerY: 5
metaKey: false
movementX: 0
movementY: 0
offsetX: 22
offsetY: 13
pageX: 1198
pageY: 29
path: Array[13]
relatedTarget: null
returnValue: true
screenX: 1797
screenY: 148
shiftKey: false
sourceCapabilities: InputDeviceCapabilities
srcElement: span.mdl-button__ripple-container
target: span.mdl-button__ripple-container
timeStamp: 1458032708743
toElement: span.mdl-button__ripple-container
type: "click"
view: Window
webkitMovementX: 0
webkitMovementY: 0
which: 1
x: 1198
y: 29

मुझे कैसे मिल सकता है id?

अद्यतन: प्लंकर सभी अच्छे हैं, लेकिन मेरे मामले में मेरे पास स्थानीय रूप से है:

event.srcElement.attributes.id- अपरिभाषित event.currentTarget.id- का मूल्य है

मैं क्रोम नवीनतम संस्करण 49.0.2623.87 मीटर का उपयोग कर रहा हूं

यह Material Design Liteबात हो सकती है? क्योंकि मैं इसका उपयोग कर रहा हूं।

Comments

आप क्या करना चाहते हैं id?

— परदीप जैन

मेरे पास एक ही क्लिक फ़ंक्शन के दो बटन हैं। इसलिए मुझे यह पता लगाने की जरूरत है कि किस पर क्लिक किया गया था

— sreginogemoh

बस स्टैटिक / डायनामिक idको पेरामर्स के साथ पास करें ।

— परदीप जैन

ऐसा क्यों करना मुश्किल है id?

— sreginogemoh

अभी पता चला है किevent.currentTarget.id

— sreginogemoh

Answer 1

यदि आप idबटन की विशेषता तक पहुंचना चाहते हैं, तो आप srcElementघटना की संपत्ति का लाभ उठा सकते हैं:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick($event)" id="test">Click</button>
  `
})
export class AppComponent {
  onClick(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
  }
}

: इस plunkr देखें https://plnkr.co/edit/QGdou4?p=preview ।

इस प्रश्न को देखें:

• मैं फ़ायरफ़ॉक्स में Event.srcElement कैसे काम कर सकता हूं और इसका क्या मतलब है?

Comments

event.srcElement.attributes.idअपरिभाषित पता नहीं क्यों ... लेकिन मैं एक idमें पायाevent.currentTarget.id

— sreginogemoh

वास्तव में? क्या तुमने मेरी तन्हाई देखी? यह वह है जो मैं उपयोग करता हूं और यह अपरिभाषित नहीं है ... मेरे मामले में (क्रोम), currentTargetअपरिभाषित है :-( आप

— किसका

वास्तव में, यह ब्राउज़र के अनुसार srcElement या लक्ष्य है। इस प्रश्न को देखें: stackoverflow.com/questions/5301643/…

— थियरी टेम्पलर

क्रोम:angular2.dev.js:23597 TypeError: Cannot read property 'nodeValue' of undefined

— sreginogemoh

मैं इस का उपयोग कर के var target = event.srcElement.attributes.id || event.currentTarget.id;

— अंत

Answer 2

टाइपस्क्रिप्ट उपयोगकर्ताओं के लिए:

    toggle(event: Event): void {
        let elementId: string = (event.target as Element).id;
        // do something with the id... 
    }

Comments

यह मेरी राय में स्वीकृत उत्तर होना चाहिए। जब ​​भी यह हो सकता है const elementId: string = (event.target as Element).id;

— हरीश

मेरे लिए वह खाली है। शून्य या अपरिभाषित नहीं बल्कि रिक्त

— डैरेन स्ट्रीट

धन्यवाद। मैं बहुत उलझन में था कि मैं सीधे टारगेट या srcTarget की संपत्ति की जांच क्यों नहीं कर सका, जब मैं उन सभी को कंसोल में देख सकता था। तत्व के रूप में कास्ट, डुह।

— जेरेमी एल

यह निश्चित रूप से शीर्ष उत्तर होना चाहिए।

— कोई नहीं

Answer 3

अंत में सबसे सरल तरीका मिला:

<button (click)="toggle($event)" class="someclass" id="btn1"></button>
<button (click)="toggle($event)" class="someclass" id="btn2"></button>

toggle(event) {
   console.log(event.target.id); 
}

Comments

यह एक मुश्किल हो सकता है: अपने बटन की तरह, कुछ HTML सामग्री मिले, तो <button ...><i class="fa fa-check"></i></button>और आप वास्तव में उस पर क्लिक करें iतत्व है, जो FontAwasome घटक है, तो event.target नहीं एक है buttonलेकिन iतत्व।

— स्कॉरुनका फ्रांटिसेक

buttonतत्व का उपयोग करने के लिए event.target.closest('button')।

— स्कॉरुनका फ्रांटिसेक

Answer 4

आप बस एक स्थैतिक मूल्य (या एक चर से *ngForया जो भी पारित कर सकते हैं )

<button (click)="toggle(1)" class="someclass">
<button (click)="toggle(2)" class="someclass">

Comments

क्या आपको लगता है कि idऐसे मामले में उपयोग करने से बचना बेहतर है ?

— sreginogemoh

यदि एकमात्र उद्देश्य इसे इवेंट पैरामीटर के रूप में पारित करना है तो मैं एक आईडी का उपयोग नहीं करूंगा।

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

का उपयोग करने के बजाय idएक सरणी या तो से एक सूचकांक लेने के लिए। यह अक्सर आश्चर्य की बात है कि हम सबसे सीधे-सीधे समाधानों को इतनी बार अनदेखा कर देते हैं।

— यूरी

Answer 5

संपूर्ण घटना को पारित करने की आवश्यकता नहीं है (जब तक कि आपको बताए गए घटना के अन्य पहलुओं की आवश्यकता न हो)। वास्तव में, यह अनुशंसित नहीं है। आप बस थोड़ा संशोधन के साथ तत्व संदर्भ पास कर सकते हैं।

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <button #btn1 (click)="toggle(btn1)" class="someclass" id="btn1">Button 1</button>
    <button #btn2 (click)="toggle(btn2)" class="someclass" id="btn2">Button 2</button>
  `
})
export class AppComponent {
  buttonValue: string;

  toggle(button) {
    this.buttonValue = button.id;
  }

}

StackBlitz डेमो

तकनीकी रूप से, आपको उस बटन को खोजने की आवश्यकता नहीं है जिसे क्लिक किया गया था, क्योंकि आपने वास्तविक तत्व को पार कर लिया है।

कोणीय मार्गदर्शन

Comments

यह सही उत्तर होना चाहिए जैसा कि @ ग्रेग के लिंक से कोणीय मार्गदर्शन में बताया गया है!

— चेरिज़ल्डी

Answer 6

अपने जब HTMLElementएक नहीं है id, nameया classकॉल करने के लिए,

तो उपयोग करें

<input type="text" (click)="selectedInput($event)">

selectedInput(event: MouseEvent) {
   log(event.srcElement) // HTMInputLElement
}

Answer 7

इसे बस इस तरह से करें: (जैसा कि टिप्पणी में कहा गया है, उदाहरण के लिए दो तरीकों के साथ है)

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app', 
    template: `
      <button (click)="checkEvent($event,'a')" id="abc" class="def">Display Toastr</button>
      <button (click)="checkEvent($event,'b')" id="abc1" class="def1">Display Toastr1</button>
    `
})
export class AppComponent {
  checkEvent(event, id){
    console.log(event, id, event.srcElement.attributes.id);
  }
}

डेमो: http://plnkr.co/edit/5kJaj9D13srJxmod213r?==view

Comments

event.srcElement.attributes.idमेरे मामले में अपरिभाषित है पता नहीं क्यों ... लेकिन मैं एक पाया idमेंevent.currentTarget.id

— sreginogemoh

सिर्फ eventफायर किए गए ऑब्जेक्ट में चेकआउट करें जहां आप देख सकते हैंid

— परदीप जैन

@sreginogemoth आप भी देख सकते हैं: event.target.idइसका आईडी मान भी हो सकता है

— आर्थर

Answer 8

आप इसके इंटरफ़ेस का उपयोग कर सकते हैं HTMLButtonElementजो इसके मूल से विरासत में मिला है HTMLElement!

इस तरह से आप कर पाएंगे ऑटो-पूरा ...

<button (click)="toggle($event)" class="someclass otherClass" id="btn1"></button>

toggle(event: MouseEvent) {
    const button = event.target as HTMLButtonElement;
    console.log(button.id);
    console.log(button.className);
 }

वर्ल्ड वाइड वेब कंसोर्टियम (W3C) प्रलेखन से HTMLElement की सभी सूची देखने के लिए

StackBlitz डेमो

Answer 9

यदि आप idकोणीय 6 में बटन की विशेषता तक पहुँच चाहते हैं, तो इस कोड का पालन करें

`@Component({
  selector: 'my-app',
  template: `
    <button (click)="clicked($event)" id="myId">Click Me</button>
  `
})
export class AppComponent {
  clicked(event) {
    const target = event.target || event.srcElement || event.currentTarget;
    const idAttr = target.attributes.id;
    const value = idAttr.nodeValue;
  }
}`

आपके idमूल्य में,

का मूल्य valueहै myId।