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

Question

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

我收到了这个错误：

DOMException：无法在“元素”上执行“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);

Answer 1

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

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

或

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

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