Angular 2 Dart：如何正确地将事件绑定到动态生成的HTML（删除不允许的属性<div（click）=“...”>）？

Question

我想将一个click事件绑定到Angular Dart中动态生成的HTML。如何正确地做到这一点？

我尝试了什么：

home_component.dart：

void addHtml() {
 html = """
  <div class="offer" (click)="offerGo()">
   ....
  </div>""";

  offers.setInnerHtml(html);
}

void offerGo() {
 print("Offer clicked!");
}

HTML已正确添加，但我在浏览器控制台中收到以下警告：

  

删除不允许的属性<DIV (click)="offerGo()">

...点击商品时点击事件不会触发。

Answer 1

无法为动态添加的HTML实例化属性或事件绑定或组件或指令。

Angular不处理以任何方式动态添加的HTML。

  

删除不允许的属性

与Angular没有直接关系，而是普通的dart:html。 另请参阅删除不允许的属性

您只能动态添加事件处理程序到动态添加的HTML：

void addHtml() {
 html = """
  <div class="offer">
   ....
  </div>""";

  offers.setInnerHtml(html);
  offers.querySelector('div.offer').onClick.listen(offerGo);
}

void offerGo() {
 print("Offer clicked!");
}