Angular2获取被点击的元素id

2024-01-11

我有这样的点击事件

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

我正在函数输入参数中捕获该事件,并想找出到底单击了哪个按钮。

toggle(event) {

}

but 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: 笨蛋都是好人但就我而言,我本地有:

event.srcElement.attributes.id- 不明确的event.currentTarget.id- 有价值

我使用的是chrome最新版本49.0.2623.87 m

难道是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;
  }
}

看看这个笨蛋:https://plnkr.co/edit/QGdou4?p=preview https://plnkr.co/edit/QGdou4?p=preview.

看这个问题:

  • 如何使 event.srcElement 在 Firefox 中工作?它是什么意思? https://stackoverflow.com/questions/5301643/how-can-i-make-event-srcelement-work-in-firefox-and-what-does-it-mean
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2获取被点击的元素id 的相关文章

  • ASP.NET MVC (Razor) 与 Angular 5

    我们目前正在考虑从 ASP NET MVC 迁移到 Angular 5 主要是因为它看起来是最好 最新的框架 然而 我们似乎都无法找出为什么 Angular 比 MVC Razor 更好的硬道理 SPA 与 MPA 似乎是不同的方法 但实际
  • Angular-CLI 全局 scss 变量

    如何在最新的 Angular CLI 使用 webpack 中添加全局 scss 变量 看起来在 styles scss 中定义的全局变量在组件样式中不可用 它们需要通过相对路径导入到组件的 SCSS 文件中 这将允许编译器找到处理所需的父
  • 使用 DI 进行单元测试和模拟服务

    我已经为此苦苦挣扎了一段时间 希望有人能提供帮助 我有一个使用服务来获取数据的组件 我正在尝试向其添加单元测试 我的问题是测试总是失败并显示 错误 没有 Http 提供程序 这是我的代码 Service import Injectable
  • Angular 4.x + Cordova:FileReader 无提示失败(白屏死机)

    我有一个 Angular 4 3 Cordova 应用程序 曾经运行得很好 但现在 我在应用程序启动时出现黑屏 并且什么也没有发生 经过一段时间的挖掘 我意识到它来自哪里 我的主页受保护CanActivate守卫将检查一些文件系统持久的首选
  • 使用 AngularFireObject 和 switchMap

    我真的不知道如何解决这个问题 我该如何修复这个错误 in user service ts import Injectable from angular core import AngularFireDatabase AngularFireL
  • Angular CORS 简单请求通过 POST 中的授权标头触发预检

    根据文档 对于简单的请求 预检不应该发生 https developer mozilla org en docs Web HTTP Access control CORS https developer mozilla org en doc
  • NG2:angular2-webpack-starter - HMR 的目的是什么?

    我正在清理我的 angular2 项目 出于多种原因 我决定从种子开始 This one https github com AngularClass angular2 webpack starter 该种子使用HMR https webpa
  • 回调在 Angular2/Firebase 中生成“TypeError:这是未定义的”

    我试图了解这里发生了什么以及为什么如果我以某种方式调用函数时会收到错误 而当我以不同的方式调用函数时却不会收到错误 这是首先产生错误的方式 播放器 service ts 文件 in the Injectable i have private
  • 如何使用签名网址将文件上传到谷歌云存储桶

    我正在开发一个 Angular 应用程序 用于显示谷歌云存储桶的内容 对于后面 我在nodeJS中使用谷歌云功能 正如他们在上传文件的文档中提到的 我创建了一个函数来生成签名 url 但是当我使用签名 url 发送文件时 我在浏览器中收到了
  • Angular 2/4 编辑表单填充 FormArray 控件

    我正在尝试为具有嵌套属性 FormArray 的模型实现编辑表单 我在语法上遇到了问题 并且不确定我是否走在正确的轨道上 主表单的属性有效 这是我遇到问题的嵌套表单 这是我到目前为止所拥有的 这里我发起表单组 private initFor
  • 如何检测角度7中的url变化包括参数和查询参数

    我需要检测一个组件中路径参数和查询参数的 url 更改 path category key component CollectionPageComponent 最后的网址将是例如类别 T恤 or 类别 T 恤 页 2我需要根据类别获取所有产
  • Angular 2 CLI - 部署

    我使用 Angular 2 CLI 构建了 Angular 2 应用程序 我现在的问题是我想将应用程序部署到本地服务器作为暂存环境以供其他人查看 大多数使用 Angular 2 CLI 的教程都展示了dist该文件夹似乎是在首次使用 CLI
  • 如何将参数传递给 JHipster 中的自定义错误消息?

    我仍在学习 JHipster 所以今天我想自己进行一些验证练习 并尝试向我的前端发送有意义的错误消息 这是我尝试过的 在我的控制器中 我有以下内容 POST lessons Create a new lesson of 45 min if
  • 如何在 webpack 2 和 typescript 以及 Angular 2 中使用 tree-shaking?

    我已经用 Angular 设置了 webpack 2 大多数情况下它似乎可以工作 但它似乎并没有做到这一点tree shaking 因为我有一个几乎不执行任何操作的应用程序 并且vendor js仍然是 800 KB 似乎关于如何打开 tr
  • 并行运行 Angular 和 AngularJS 框架

    我找到了描述如何将 Angular 2 组件集成到 AngularJS 中的资源 但所有这些都涉及像 Angular 项目一样设置 AngularJS 项目 需要 TypeScript 的转译器 需要 ES6 需要 import 语句 我想
  • JHipster:使用标准过滤实体 - 预期的 Angular 客户端方法

    我最近开始使用JHipster http www jhipster tech 感谢这个出色项目的维护者 在 JHipster 的当前版本 撰写本文时为 4 10 2 中 实体可以通过实体子生成器启用过滤 或者通过包含filter Entit
  • Ionic 3:菜单切换总是被隐藏

    我已经在 Ionic 3 中实现了汉堡菜单 但我遇到了一个问题 当我在 Android 设备上运行该应用程序时 汉堡菜单不断消失 即打开侧面菜单的按钮消失了 然而 这种情况只是偶尔发生 我尝试运行该应用程序 同时使用 Google Chro
  • 使用 angularfire2 在 Firebase 实时数据库上查询数据关系

    我需要查询评论并仅请求 userId 在评论中列出的用户 我在 Firebase 实时数据库中的数据库结构 comments c id1 commentId c id1 commentText text userId u id1 c id2
  • 将 formControlName 与 之类的内容一起使用

    我有一个动态表单 显示我通过 REST 获得的多个数据集 用户将编辑此数据集 然后只需提交它即可将其发送回服务器 该表单是动态构建的FormBuilder array 并循环通过formArrayName ngFor在我的模板中 每个数据集
  • 使用 Google Analytics 的 Angular 4+

    我正在尝试将 Google Analytics 与 Angular 4 一起使用 但我在 ts 中找不到 ga js 的任何 type 为了快速解决方案 我在每个组件中都使用了它 declare let ga any 下面我是如何解决的 创

随机推荐