在模板文字 javascript / angular 中绑定单击事件的函数

Question

如何在模板文字中绑定函数 onclick / (click)。

例如：

for (let i = 0; i < locations.length; i++) {
      let customHtml = ` 
      <div class="flex">
        <ion-button size="small" (click)="${abc(locations[i])}">Message</ion-button>
        <ion-button size="small" onclick="abc('${locations[i]}')">Request</ion-button>
      </div>      
    `;
}

abc(l){
 console.log(l); 
}

第一个按钮是否在加载时被记录。不是点击。

在第二个按钮上显示错误：Uncaught ReferenceError: abc is not defined。

我已经尝试过香草 Javascript 和 Angular 两种方式来绑定点击事件的功能。

Answer 1

管理它在@Reyno 评论的帮助下创建动态元素。通过使用 angular 的 Renderer2.

for (let i = 0; i < locations.length; i++) {
  let customHtml = this.addCustomHtml(locations[i]);
  // can use it here it is working now. 

}
    
addCustomHtml(l) {
   const p1 = this.renderer.createElement('p');
   const p1Text = this.renderer.createText(`ID: ${l[0]}`);
   this.renderer.appendChild(p1, p1Text);
    
   const p2 = this.renderer.createElement('p');
   const p2Text = this.renderer.createText(`Lat: ${l[1]} \n Lng: ${l[2]}`);
   this.renderer.appendChild(p2, p2Text);
    
   const button = this.renderer.createElement('ion-button');
   const buttonText = this.renderer.createText('Send Request');
   button.size = 'small';
   button.fill = 'outline';
    
   button.onclick = function () {
     console.log(l); 
   };
   this.renderer.appendChild(button, buttonText);
    
   const container = this.renderer.createElement('div');
   this.renderer.appendChild(container, p1);
   this.renderer.appendChild(container, p2);
   this.renderer.appendChild(container, button);
   return container;
 }

在模板文字 javascript / angular 中绑定单击事件的函数

Bind function on click event inside template literal javascript / angular

javascript

angular

typescript

ionic-framework

template-literals