如何从 Ionic 2 中的按钮单击获取 ID？

Question

我有一个按钮<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。确保打开浏览器控制台查看结果

有什么想法吗？

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

Working Plunker example

如何从 Ionic 2 中的按钮单击获取 ID？

How to get an ID, on click, from a button in Ionic 2?

javascript

dom-events

ionic2

angular