时间戳

首页 > 解决方案 > 在 Angular 中使用 renderer2 在按钮中设置（单击）属性

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

问题描述

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

我收到了这个错误：

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);

在此处输入图像描述

标签： htmlangulartypescriptangular-renderer2

解决方案

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

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

或者

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

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

推荐阅读