Angular2 รับรหัสองค์ประกอบที่คลิก

ฉันมีเหตุการณ์คลิกดังกล่าว

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

UPDATE: Plunkers นั้นดีแต่ในกรณีของฉันฉันมีในเครื่อง:

event.srcElement.attributes.id- ไม่ได้กำหนด event.currentTarget.id- มีค่า

ฉันใช้ Chrome เวอร์ชันล่าสุด 49.0.2623.87 ม

มันอาจจะเป็นMaterial Design Liteเรื่อง? เพราะฉันกำลังใช้มัน

หากคุณต้องการเข้าถึง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 ทำงานใน Firefox ได้อย่างไรและหมายความว่าอย่างไร

สำหรับผู้ใช้ TypeScript:

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

ในที่สุดก็พบวิธีที่ง่ายที่สุด:

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

คุณสามารถส่งผ่านค่าคงที่ (หรือตัวแปรจาก*ngForหรืออะไรก็ได้)

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

ไม่จำเป็นต้องผ่านเหตุการณ์ทั้งหมด (เว้นแต่คุณต้องการแง่มุมอื่น ๆ ของเหตุการณ์นอกเหนือจากที่คุณระบุไว้) ที่จริงไม่แนะนำ คุณสามารถส่งผ่านการอ้างอิงองค์ประกอบได้ด้วยการปรับเปลี่ยนเพียงเล็กน้อย

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

ในทางเทคนิคคุณไม่จำเป็นต้องค้นหาปุ่มที่ถูกคลิกเนื่องจากคุณได้ส่งผ่านองค์ประกอบจริงแล้ว

คำแนะนำเชิงมุม

เมื่อคุณHTMLElementไม่ได้มีid, nameหรือclassการโทร

จากนั้นใช้

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

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

ทำแบบนี้ง่ายๆ: (ตามที่กล่าวไว้ในความคิดเห็นนี่คือตัวอย่างด้วยสองวิธี)

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

คุณสามารถใช้อินเทอร์เฟซ 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);
 }

หากต้องการดูรายการ HTMLElement ทั้งหมดจากเอกสาร World Wide Web Consortium (W3C)

การสาธิต StackBlitz

หากคุณต้องการเข้าถึง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.