使用 Angular 中的 renderer2 在按钮中设置单击属性

如何解决使用 Angular 中的 renderer2 在按钮中设置单击属性

我正在尝试创建一个基于聊天的应用程序，在该应用程序中，我根据要求并使用 Angular Renderer2 创建每种类型的聊天弹出窗口。我尝试在 UI 中渲染时向聊天消息元素添加 (click) 属性。

我收到此错误：

DOMException: 无法在 'Element' 上执行 'setAttribute'： '((click))' 不是有效的属性名称。

chat.component.ts

const btn3: HTMLdivelement = this.renderer.createElement('button');
this.renderer.addClass(btn3,'btn');
this.renderer.addClass(btn3,'btn-light');
this.renderer.setAttribute(btn3,'(click)','sendMessage()');
btn3.innerHTML = 'Maybe later!';
this.renderer.appendChild(buttons,btn3);

解决方法

setAttribute 功能是设置元素的属性，如disabled。相反，您可以使用 listen() 函数添加事件侦听器。

this.renderer.listen(
  btn3,'click',this.sendMessage.bind(this)
);

或

this.renderer.listen(
  btn3,() => this.sendMessage()
);

您要么需要 bind，要么使用箭头函数来保留回调函数中 this 关键字的含义。