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

Question

我正在尝试将包含(click)事件的字符串注入Angular2模板。 在加载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 is not defined ，所以我知道它正在寻找那个javascript函数。

所以问题：我怎样才能让Angular2订阅这个事件或函数？

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中动态添加事件侦听器

Answer 2

我在服务中导入ElementRef时遇到问题，并且不想在那里传递Renderer引用。 此服务是关于显示“正在加载...”对话框，其中附加3秒动态关闭按钮 。 我找到了解决方案如何使用jQuery为此按钮添加click事件。 希望这有助于某人。

（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())不起作用。