[angular] Angular2는 클릭 된 요소 ID 가져 오기
그런 클릭 이벤트가 있습니다
<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있습니까?
업데이트 :
Plunkers는 모두 좋지만 제 경우에는 로컬에 있습니다.
event.srcElement.attributes.id-정의되지 않음
event.currentTarget.id-값이 있음
크롬 최신 버전 49.0.2623.87m를 사용하고 있습니다.
그럴 수 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 .
이 질문을보십시오 :
답변
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;
}
}
기술적으로 실제 요소를 전달 했으므로 클릭 한 버튼을 찾을 필요가 없습니다.
답변
당신이 때 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);
}
}
