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

注册事件处理程序。

另见Dynamically add event listener in Angular 2

Answer 2

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

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

declare var $: any;

（2）声明$

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

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

$('alert-cancel-button').click(() => this.dismiss())

顺便说一下，@Entity @Table(name="parents") public class Parent { @Id @GeneratedValue private long id; @ElementCollection @Cascade(org.hibernate.annotations.CascadeType.ALL) private Set<Child> children; public Parent() {} public Parent(Set<Child> children) { this.children = children; } public long getId() { return id; } public void setId(long id) { this.id = id; } public Set<Child> getChildren() { return children; } public void setChildren(Set<Child> children) { this.children = children; } @Entity @Table(name="children") public static class Child { @Id @GeneratedValue private long id; private String name; @ElementCollection @Cascade(org.hibernate.annotations.CascadeType.ALL) private Set<Child> dependencies; public Child() {} public Child(String name) { this.name = name; dependencies = new LinkedHashSet<>(); } public long getId() { return id; } public void setId(long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public getDependencies() { return dependencies; } public setDependencies(Set<Child> dependencies) { this.dependencies = dependencies; } } }无效。

Angular2 - 动态添加HTML

2 个答案: