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

Question

我想将点击事件绑定到 Angular Dart 中动态生成的 HTML。如何正确操作？

我试过的：

home_component.dart:

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

  offers.setInnerHtml(html);
}

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

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

Removing disallowed attribute <DIV (click)="offerGo()">

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

Answer 1

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

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

Removing disallowed attribute

与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!");
}

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

Angular 2 Dart: How to bind events correctly to dynamically generated HTML (Removing disallowed attribute <DIV (click)="...">)?

dart

angular-dart

angular2-dart