Angular2 - 动态添加的HTML如何捕获/(订阅)点击事件

Question

我将尝试向Angular2模板注入一个包含(click)事件的字符串。该字符串是在DOM加载后从后端动态获取的。毫不奇怪，Angular无法识别被注入的(click)事件。

示例模板：

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

后端给出的示例字符串：

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

在 Angular 组件中的示例函数调用：

itemClick(event) {
   debugger;
}

---

我的下一个猜测是尝试让Angular订阅或捕获普通的javascript事件，这样字符串就会变成：

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

果然，我收到了一个错误消息，说itemClick未定义，所以我知道它正在寻找那个JavaScript函数。

问题是：我该如何让Angular2订阅此事件或函数？

- Rhyeen

Answer 1

声明式的事件绑定仅在组件模板中支持静态HTML。
如果您想动态添加元素并订阅其事件，您需要以命令式方式执行。

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

如果您想保证WebWorker的安全性，可以注入Renderer或类似物。

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

使用替代方法

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

注册事件处理程序。

另请参阅Angular 2中动态添加事件监听器

- Günter Zöchbauer

---

我想补充一下，由于上述代码是在组件内执行的（这可以从Günter使用ElementRef和/或Renderer看出），因此它是在Angular区域内执行的，因此在单击事件处理程序触发后，Angular变更检测将始终运行（如所需）。 （如果您将事件处理程序附加到Angular外部，则无法按预期工作。） - Mark Rajcok

谢谢！我遇到了完全相同的问题，但我不太清楚如何为特定的span添加点击事件监听器。例如在问题中提到的那个。 - user911

那里提到的 e 是什么？ - blackdaemon

@blackdaemon 应该是事件(event)。感谢提示 - 已修复。 - Günter Zöchbauer

https://stackoverflow.com/questions/44407771/how-to-bind-a-click-event-function-in-innerhtml-angular-2?noredirect=1#comment75814579_44407771 - blackdaemon

Answer 2

我在我的服务中导入ElementRef时遇到了问题，而且不想将Renderer引用传递进去。这个服务是用来显示“加载中…”对话框，3秒后会附加一个动态关闭按钮。我找到了使用jQuery为此按钮添加点击事件的解决方案。希望这对某人有所帮助。

(1) 将jQuery添加到Angular 2的index.html文件中

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

(2) 声明 $

declare var $: any;

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

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

顺便提一下，$('alert-cancel-button').click(() => this.dismiss()) 没有起作用。

- Kroksys