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

Question

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

我收到了这个错误：

DOMException：无法在“元素”上执行“setAttribute”：“（（单击））”不是有效的属性名称。

聊天组件.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 function 是设置元素的属性，如disabled 。 相反，您可以使用listen() function 添加事件侦听器。

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

或者

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

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