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

Question

我正在尝试创建一个基于聊天的应用程序，我在其中根据要求创建每种类型的聊天弹出窗口并使用 Angular Renderer2。我试图在 UI.

中呈现时向聊天消息元素添加 (click) 属性

我收到这个错误：

DOMException: Failed to execute 'setAttribute' on 'Element': '((click))' is not a valid attribute name.

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 关键字的含义。

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

Set (click) attribute in button using renderer2 in Angular

html

angular

typescript

angular-renderer2