Javascript Angular2-在动态添加的HTML中捕获/订阅（单击）事件

我试图将包含

（单击）

事件的字符串注入Angular2模板。在加载DOM之后，从后端动态检索字符串。Angular无法识别注入的

（单击）

事件也就不足为奇了

模板示例：

<div [innerHTML]="test"></div>

---

我的下一个猜测是尝试订阅或捕获一个普通的旧javascript事件，因此字符串将是：

var test = "When ready, <span onClick=\"itemClick($event)\">click me</span>."

var test=“准备好后，单击我。”

果然，我得到了一个错误，没有定义

itemClick

，所以我知道它在寻找那个javascript函数

---

那么问题：如何让Angular2订阅此事件或函数？

声明性事件绑定仅在组件模板中的静态HTML中受支持。
如果您想订阅动态添加的元素的事件，则需要强制订阅

elementRef.nativeElement.querySelector(...).addEventListener(...)

或类似的

如果希望WebWorker安全，可以插入

呈现程序

constructor(private elementRef:ElementRef, private renderer:Renderer) {}

并改用

this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { handleClick(event);});

注册事件处理程序

---

另请参见

我在我的服务中导入ElementRef时遇到问题，不想在那里传递渲染器引用。此服务是关于显示“加载…”对话框，3秒钟后，动态关闭按钮被连接。我找到了如何使用jQuery为这个按钮添加单击事件的解决方案。希望这对某人有所帮助

（1）将jQuery添加到Angular 2 index.html文件中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

（3）使用jQuery 这是我的服务中的一段代码：

public异步呈现（）{
this.isLoading=true；
return等待this.loadingController.create（{message:'Loading…}）。然后（a=>{
a、 现在（），然后（（）=>{
设置超时（（）=>{
a、 消息+=''；
//这里开始使用jQuery
$（a）.单击（（单击对象）=>{
if（$（clickedObject.target）.hasClass（'alert-cancel-button'））{
这个。解散（）；
}
});
}, 3000);
});
});
}
公共异步解雇（）{
return wait this.loadingController.disclose（）；
}

• 顺便说一句，

  $（'alert-cancel-button'）。单击（（）=>this.disease（））

  不起作用

  ---

我只想补充一点，因为上面的代码是在组件内部执行的（正如Günter使用ElementRef和/或渲染器这一事实所证明的），它是在角度区域内执行的，因此在点击事件处理程序触发后，角度变化检测将始终运行（根据需要）。（如果改为将事件处理程序附加到Angular外部，它将无法按预期工作。）如果使用

addEventListener（）

或

listen（）

，是否需要在

ngOnDestroy（）

中注销侦听器？我假设-是的，但我从不确定这一点。通常，如果您强制请求一个资源，您有责任为了安全起见发布。显然

Renderer.listen（）

将返回一个函数，该函数将删除侦听器（这很方便）。请参阅Eric的答案以获取示例：谢谢！我遇到了完全相同的问题，我不清楚如何在特定范围内为click事件添加侦听器。例如，问题中提出的问题。

this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { handleClick(event);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

declare var $: any;

 public async present() {
    this.isLoading = true;
    return await this.loadingController.create({message: 'Loading...'}).then(a => {
      a.present().then(() => {
        setTimeout(() => {
          a.message += '<ion-icon name="close-circle" class="alert-cancel-button"></ion-icon>';


          // Here starts jQuery usage
          $(a).click((clickedObject) => {
            if ($(clickedObject.target).hasClass('alert-cancel-button')) {
              this.dismiss();
            }
          });


        }, 3000);
      });
    });
  }

  public async dismiss() {
    return await this.loadingController.dismiss();
  }