使用 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關鍵字的含義。