Angular 5如何通过方法绑定属性？能否传入按钮控件本身？

嗨，作为Angular和TypeScript新手，能尝试这种思路很棒，但你当前的写法有个小问题——模板插值{{ }}里的this指向的是组件实例，不是按钮DOM元素本身，所以GetSomething(this)拿到的是你的组件对象，不是Button，自然sender.id不会得到预期的"Button1"。

不过别担心，有两种符合Angular风格的方法可以实现你想要的效果：

方法一：模板引用变量+属性绑定 #

如果你是想在渲染按钮时，就把按钮控件传入方法来生成data-something的值，可以用模板引用变量配合属性绑定：

模板代码： #

<input type="button" #button1 id="Button1" [attr.data-something]="GetSomething(button1)">

组件方法： #

GetSomething(sender: HTMLButtonElement) {
  // 这里sender就是Button控件本身
  console.log(sender.id); // 会输出"Button1"
  return "garbage";
}

这里的关键点：

• #button1是模板引用变量，直接指向这个按钮DOM元素，把它作为参数传入方法就能拿到控件本身
• 用[attr.data-something]代替插值语法，这是Angular中绑定自定义属性的标准方式，比插值更适合动态属性场景

方法二：事件触发时传入控件 #

如果你的需求是在按钮触发事件（比如点击）时传入控件，那可以用$event.target来获取DOM元素：

模板代码： #

<input type="button" id="Button1" (click)="HandleButtonClick($event.target)">

组件方法： #

HandleButtonClick(sender: HTMLButtonElement) {
  console.log(sender.id); // 输出"Button1"
  // 其他处理逻辑
}

最后提醒一句：Angular的核心理念是数据驱动视图，尽量优先通过组件属性、数据绑定来实现需求，避免直接操作DOM。但如果确实需要和DOM元素交互，上面的方法都是安全可行的~

内容的提问来源于stack exchange，提问作者mxmissile