如何在离子2角度2中的点击事件上获取按钮的id和名称值

时间:2017-05-28 08:09:47

标签: javascript angular ionic-framework ionic2

我有一个按钮

<button ion-button icon-left name="0x10000011 (click)="AppService.sendNotify($event)" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

当我点击它时,我希望在我的服务id功能中获得sendNotify属性。

public sendNotify(data) {
  var method = 'SCAN_BUTTON';
  var name = data.target.name;
  var id = data.target.id;
  var value = data.target.value - 0;
  console.log("#$#$%$%^$%^#$%^#$%",method, name, value);
}

此处我没有按下idname按钮。代替

#$#$%$%^$%^#$%^#$% SCAN_BUTTON undefined NaN.

任何人都可以帮我找到我的错误吗?

3 个答案:

答案 0 :(得分:3)

您正在考虑将离子组件ion-button作为基本的html button标记。

它实际上是一个角度分量。检查here

它的内部html看起来像:

<span class="button-inner">
  <ng-content></ng-content>
</span>
<div class="button-effect"></div>

取决于您点击按钮的位置,它会根据事件发送标记的ID和名称。点击区域可以是button标记 span

您只需将该值作为参数发送。

<button ion-button icon-left name="0x10000011" (click)="AppService.sendNotify($event,'0x10000011','0x10000011')" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

A plunker to try

答案 1 :(得分:2)

您可以使用以下代码

获取值
<button id="ar" name="some" (click)="clicked($event)"> CLICK ME </button>


clicked(event){
    console.log(event.srcElement.id)
    console.log(event.srcElement.name)

  }

<强> LIVE DEMO

答案 2 :(得分:0)

您的代码一般看起来很好,我还建议使用目标而不是srcElement。

在您的代码中,您只需关闭name属性,尝试将其更改为:

<button ion-button icon-left name="0x10000011" (click)="AppService.sendNotify($event)" id="0x10000011" value=1>
  <ion-icon name="camera"></ion-icon>
  CAM Icon
</button>

我希望这可以解决您的问题。