Angular2 nhận id phần tử được nhấp

Tôi có một sự kiện nhấp chuột như vậy

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

Tôi đang nắm bắt sự kiện trong tham số đầu vào hàm của mình và muốn tìm hiểu chính xác nút nào đã được nhấp.

toggle(event) {

}

nhưng eventkhông có idtài sản.

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

Làm thế nào tôi có thể tìm thấy một id?

CẬP NHẬT: Tất cả các hố cát đều tốt nhưng trong trường hợp của tôi, tôi có cục bộ:

event.srcElement.attributes.id- không xác định event.currentTarget.id- có giá trị

Tôi đang sử dụng chrome Phiên bản mới nhất 49.0.2623.87 m

Nó có thể là Material Design Liteđiều? bởi vì tôi đang sử dụng nó.

Nếu bạn muốn có quyền truy cập vào idthuộc tính của nút, bạn có thể tận dụng thuộc srcElementtính của sự kiện:

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

Xem plunkr này: https://plnkr.co/edit/QGdou4?p=preview .

Xem câu hỏi này:

• Làm cách nào để event.srcElement hoạt động trong Firefox và nó có nghĩa là gì?

Đối với người dùng TypeScript:

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

Cuối cùng đã tìm ra cách đơn giản nhất:

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

Bạn chỉ có thể chuyển một giá trị tĩnh (hoặc một biến từ *ngForhoặc bất cứ thứ gì)

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

Không cần phải vượt qua toàn bộ sự kiện (trừ khi bạn cần các khía cạnh khác của sự kiện mà bạn đã nêu). Trong thực tế, nó không được khuyến khích. Bạn có thể chuyển tham chiếu phần tử chỉ với một chút sửa đổi.

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

}

Bản trình diễn StackBlitz

Về mặt kỹ thuật, bạn không cần phải tìm nút đã được nhấp vì bạn đã vượt qua phần tử thực tế.

Hướng dẫn góc

Khi bạn HTMLElementkhông có id, namehoặc classkêu gọi,

sau đó sử dụng

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

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

làm như thế này đơn giản: (như đã nói trong nhận xét ở đây là ví dụ với hai phương pháp)

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

Bạn có thể sử dụng giao diện HTMLButtonElement kế thừa từ cha mẹ của nó HTMLElement!

Bằng cách này, bạn sẽ có thể tự động hoàn thành ...

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

Để xem tất cả danh sách HTMLElement từ tài liệu của World Wide Web Consortium (W3C)

Bản trình diễn StackBlitz

Nếu bạn muốn có quyền truy cập vào idthuộc tính của nút ở góc 6, hãy làm theo mã này

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

idgiá trị của bạn ,

giá trị của valuelà myId.