Angular2 - catch/subscribe 到动态添加的（单击）事件 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);});

注册事件处理程序。

另见

Answer 2

我在 service 中导入 ElementRef 时遇到问题，不想在那里传递 Renderer 引用。此服务是关于显示 'Loading...' 对话框，其中 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()) 没用。

Angular2 - catch/subscribe 到动态添加的（单击）事件 HTML

Angular2 - catch/subscribe to (click) event in dynamically added HTML

javascript

events

try-catch

subscribe

angular