Angular2 erhält angeklickte Element-ID

Ich habe ein solches Klickereignis

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

Ich fange das Ereignis in meinem Funktionseingabeparameter ab und möchte herausfinden, auf welche Schaltfläche genau geklickt wurde.

toggle(event) {

}

hat aber eventkeine idEigenschaft.

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

Wie finde ich eine id?

UPDATE: Plunker sind alle gut, aber in meinem Fall habe ich vor Ort:

event.srcElement.attributes.id- undefiniert event.currentTarget.id- hat den Wert

Ich verwende Chrome neueste Version 49.0.2623.87 m

Könnte es Material Design Liteetwas sein? weil ich es benutze.

Wenn Sie Zugriff auf das idAttribut der Schaltfläche haben möchten, können Sie die srcElementEigenschaft des Ereignisses nutzen:

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

Siehe dieses Plunkr: https://plnkr.co/edit/QGdou4?p=preview .

Siehe diese Frage:

• Wie kann ich event.srcElement in Firefox zum Laufen bringen und was bedeutet das?

Für TypeScript-Benutzer:

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

Endlich den einfachsten Weg gefunden:

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

Sie können einfach einen statischen Wert (oder eine Variable von *ngForoder was auch immer) übergeben.

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

Es ist nicht erforderlich, die gesamte Veranstaltung zu bestehen (es sei denn, Sie benötigen andere Aspekte der Veranstaltung als angegeben). In der Tat wird es nicht empfohlen. Sie können die Elementreferenz mit nur einer kleinen Änderung übergeben.

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 Demo

Technisch gesehen müssen Sie die Schaltfläche, auf die geklickt wurde, nicht finden, da Sie das eigentliche Element übergeben haben.

Winkelführung

Wenn Ihr HTMLElementnicht ein haben id, nameoder classauf Abruf,

dann benutze

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

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

Mach das einfach so: (wie im Kommentar hier mit Beispiel mit zwei Methoden gesagt)

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

Demo: http://plnkr.co/edit/5kJaj9D13srJxmod213r?p=preview

Sie können seine Schnittstelle verwenden HTMLButtonElement , die von seinem übergeordneten erbt HTMLElement!

Auf diese Weise können Sie die automatische Vervollständigung durchführen ...

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

Alle Listen von HTMLElement aus der Dokumentation des World Wide Web Consortium (W3C) anzeigen

StackBlitz Demo

Wenn Sie Zugriff auf das idAttribut der Schaltfläche in Winkel 6 haben möchten, befolgen Sie diesen Code

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

Ihr idim Wert,

der Wert von valueist myId.