时间戳

首页 > 解决方案 > 角材料 | 按下按钮文本时，Material Button 的行为有所不同

angular - 角材料 | 按下按钮文本时，Material Button 的行为有所不同

问题描述

考虑以下代码：

HTML：

<button mat-flat-button id="test" (click)="toggle($event)">Click me!</button>

零件：

toggle(event) {
  let id: string = (event.target as Element).id;
  console.log(id)
  console.log(event.target)
}

按下按钮将触发toggle以事件为参数的函数。系统将记录"test"(id) 和一个按钮事件。

按下按钮上的文本将记录一个未定义的 id 和一个spanwith classmat-button-wrapper

问题：如果按下按钮文本我想获取按钮事件目标（而不是跨度事件目标），我该如何实现？

标签： angulartypescriptangular-material

解决方案

点击事件的行为正确。在 JavaScript 中，当在源元素上触发事件时，它会从源“冒泡”并通过祖先元素树向上传播。

所以当你有这样的 DOM 结构时：

<button mat-flat-button>
    <span>Click me!</span>
</button>

上的点击事件span将传播到button文档根目录。

如果您想获得按钮元素，您可以使用模板引用变量并将其传递给您的事件处理程序：

<button mat-flat-button id="test" #testButton (click)="toggle(testButton)">Click me!</button>

推荐阅读