কৌণিক 2 ক্লিক করুন উপাদান আইডি

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= পূর্বরূপ দেখুন ।

এই প্রশ্নটি দেখুন:

• আমি কীভাবে ফায়ারফক্সে ইভেন্ট.এসসিআরএলমেন্ট কাজ করতে পারি এবং এর অর্থ কী?

Comments

event.srcElement.attributes.idundefined হয় জানি না কেন ... কিন্তু আমি একটি পাওয়া idমধ্যেevent.currentTarget.id

— sreginogemoh

সত্যি? আপনি আমার plunkr দেখেছি? এটি আমি ব্যবহার করি এবং এটি অপরিজ্ঞাত নয় ... আমার ক্ষেত্রে (ক্রোম) currentTargetঅপরিজ্ঞাত :-( আপনি কোন ব্রাউজার ব্যবহার করেন?

— থিয়েরি টেম্পিলার

প্রকৃতপক্ষে, এটি হয় ব্রাউজার অনুসারে এসসিআরএলিমেন্ট বা লক্ষ্য। এই প্রশ্নটি দেখুন: স্ট্যাকওভারফ্লো.com

— থিয়েরি টেম্প্লিয়ার

ক্রোম:angular2.dev.js:23597 TypeError: Cannot read property 'nodeValue' of undefined

— sreginogemoh

আমি এটি ব্যবহার শেষ করছিvar target = event.srcElement.attributes.id || event.currentTarget.id;

— sreginogemoh

Answer 2

টাইপস্ক্রিপ্ট ব্যবহারকারীদের জন্য:

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

Comments

এটি আমার মতে গ্রহণযোগ্য উত্তর হওয়া উচিত it যাইহোক এটি হতে পারে 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

এটি একটি জটিল হতে পারে: যদি আপনার বোতামটিতে কিছু এইচটিএমএল সামগ্রী থাকে, যেমন <button ...><i class="fa fa-check"></i></button>এবং আপনি যদি সেই iউপাদানটিতে ক্লিক করেন তবে এটি হ'ল ফন্টঅ্যাসোম উপাদান, তবে ইভেন্ট.আর্টেজটি buttonকোনও iউপাদান নয়।

— Skorunka František

buttonউপাদান ব্যবহার পেতে event.target.closest('button')।

— Skorunka František

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

}

স্ট্যাকব্লিটজ ডেমো

প্রযুক্তিগতভাবে, আপনাকে ক্লিক করা বোতামটি খুঁজে পাওয়ার দরকার নেই, কারণ আপনি আসল উপাদানটি পাস করেছেন।

কৌণিক নির্দেশিকা

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?p= পূর্বরূপ

Comments

event.srcElement.attributes.idআমার ক্ষেত্রে undefined হয় জানি না কেন ... কিন্তু আমি একটি পাওয়া idমধ্যেevent.currentTarget.id

— sreginogemoh

eventআপনি যেখানে দেখতে পাচ্ছেন সেখানে অবজেক্টের অবজেক্টে কেবল চেকআউট করুনid

— পারদীপ জৈন

@ স্রেগিনোজেমথ আপনি এটিও পরীক্ষা করতে পারেন: 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);
 }

ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (ডাব্লু 3 সি) ডকুমেন্টেশন থেকে এইচটিএমলেমেন্টের সমস্ত তালিকা দেখতে

স্ট্যাকব্লিটজ ডেমো

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।