Question

首先是一点背景。我在我的页面上显示通知，我使用库here来执行此操作。您可以使用html显示自定义通知，如下所示。

this.toastr.custom('<div class="alert-box alert-box-sos"><div class="info-box"><div class="image"><div class="avatar"></div></div><div class="info"><span>' + data.UserName + '</span>Requested Help<ul class="buttons"><li><a [routerLink]="" id="finduser" class="btn btn-action btn-view">View</a></li><li><a href="" class="btn btn-action btn-info">Info</a></li></ul></div></div></div>', null , {animate: 'flyLeft', enableHTML: true, dismiss: 'controlled', autoDismiss: false, showCloseButton: true});

由于这个html将动态插入设置click事件，我通常对模板的方式不起作用。我一直在尝试在创建和显示通知后绑定事件，但是click事件不会触发。你可以看到我在这里尝试过的东西。

helpRequestAlert(request: NotificationEvent) {
  const data = JSON.parse(request.Json);
  this.zone.run(() => {
    this.warningSound.play();
    const helpToast = this.toastr.custom('<div class="alert-box alert-box-sos"><div class="info-box"><div class="image"><div class="avatar"></div></div><div class="info"><span>' + data.UserName + '</span>Requested Help<ul class="buttons"><li><a [routerLink]="" id="finduser" class="btn btn-action btn-view">View</a></li><li><a href="" class="btn btn-action btn-info">Info</a></li></ul></div></div></div>', null , {animate: 'flyLeft', enableHTML: true, dismiss: 'controlled', autoDismiss: false, showCloseButton: true});

    const toast = document.getElementById('finduser');
    console.log(toast);
    if (toast !== null && toast !== undefined) {
      toast.addEventListener('click', this.findUser.bind(this));
    }
  });
}

也忘了添加我绑定的功能。非常简单，只是为了表明事件正在解雇。

  findUser() {
    console.log('Find User');
  }

我从文档中获取了我需要的元素，因此add事件侦听器被点击，但click事件永远不会触发。感谢您的帮助或指导。

事件绑定到角度的动态html

0 个答案: