IONIC 4 - 如何在 HTML 中动态添加点击事件

Posted 2023-03-13

【中文标题】IONIC 4 - 如何在 HTML 中动态添加点击事件

【英文标题】：IONIC 4 - How to add a click event dynamically in HTML

【发布时间】：2019-12-26 00:31:36

【问题描述】：

我有一个函数可以用正则表达式检测 url 链接并用span 标记替换。

替换工作正常，实际问题是：当我在这个span上使用(click)="myFunction()"时，他没有用点击事件编译，只是在html上添加。

我的功能：

insertHrefs(content: string): string 
    const links = content.match(/\b(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+/gm);
    const linksReplaced = [];

    // tslint:disable-next-line: forin
    for (const i in links) 
      const link = links[i];
      if (linksReplaced.find(l => l === link))  continue; 

      content = AppUtils.replaceAll(content, link,
       `<span style="color:#357CFF;" (click)="test()">$link</span>`
      );
      linksReplaced.push(link);
    
    return content;
  

结果： http://prntscr.com/ov8yfc

我需要一些方法将点击事件动态添加到span 标签。

【参考方案1】：

您需要将模板编译成可以添加到 DOM 中的元素，否则浏览器将无法理解 (click)= 是什么。

您可以查看this question 以了解它是如何完成的。请注意，第一个答案是针对 Angular 2 的，并且已被 Angular 2.something 弃用。另一个答案与 Angular 4 相关。我想这一切的原因是编译模板（或动态组件）并不是 Angular 团队真正希望你做的事情。

当然，您可以根本不编译任何东西，而只需向 span 元素添加一个点击事件。您需要在 DOM 中查找元素，然后使用 elem.addEventListener('click', () => myFunction() ); 附加事件处理程序

【讨论】：

但我如何将span 标签声明为元素以使用addEventListener？

将内容添加到 DOM 树后执行。使用 document.getElementsByTag 或类似的东西。