如何在点击时从 Ionic 2 中的按钮获取 ID？答案

【问题标题】：How to get an ID, on click, from a button in Ionic 2?如何在点击时从 Ionic 2 中的按钮获取 ID？
【发布时间】：2016-07-12 04:41:10
【问题描述】：

我有一个按钮<button (click)="navToPage2($event)" #button block id="test">Click here</button>

当我点击它时，我想获得id 属性：

navToPage2(event) {
    console.log(event.target.attributes);
}

我遇到的问题是，如果我点击它，我会得到NamedNodeMap {0: class, length: 1}，没有'id'

但是，如果我在边缘右击我会得到NamedNodeMap {0: block, 1: id, 2: class, length: 3} 和id

问题在于此按钮的呈现方式：

<button block="" id="test" class="button button-default button-block">
    <span class="button-inner">Click here</span><ion-button-effect></ion-button-effect>    
</button>

span 有一些填充，如果我在span 之外单击，我会得到id

这里是一个示例https://codepen.io/patrioticcow/pen/XKzdXv?editors=1010。确保打开浏览器控制台查看结果

有什么想法吗？

【问题讨论】：

请问你为什么需要那个id？也许还有另一种做事的方式，我们避免过多修改 Ionic 渲染事物的方式......
还有另一种方法可以完成我的任务。实际上有几种方法。我只是对这个特殊情况感到好奇。

标签： javascript angular ionic2 dom-events

【解决方案1】：

您已经定义了模板变量#button，因此您实际上可以传递它来获取正确的元素ID。

<button (click)="navToPage2($event, button)" #button block="" id="test" class="button button-default button-block">
    <span class="button-inner">Click here</span><ion-button-effect></ion-button-effect>    
</button>

在你的方法中：

navToPage2(event, button) {
    console.log(button.id);
}

工作Plunker 示例

【讨论】：

奇怪，我看到 ii 工作，但在我的 codepen 示例中没有