javascript - 如何在 Angular 4 中动态生成的元素上触发点击事件？

Question

我正在使用 API get 调用从数据库中获取 HTML 代码并呈现 html。

生成的HTML如下:-

<span (click)="triggerClick()" data-link-id="960" data-link="8" class="level_modal">individuals</span>

triggerClick() 函数在 ts 文件中定义，但动态生成的 html 代码不会触发该函数。

Answer 1

原因

这是行不通的。你用来编写 Angular 模板的语言不是 HTML。这是一种自定义的 Angular 语法，故意看起来像 HTML，以改善编写代码的体验。然后将这些模板编译成高度优化的 JavaScript 函数。

您从 API 获得的字符串会在您的应用程序运行时收到，这意味着 Angular 的编译器已经完成了它的工作(它已经编译了代码，这就是您可以运行您的应用程序的原因)。此时，Angular 的编译器默认不再可用。在应用程序的最终包中包含编译器是一个性能问题，因为编译器代码占用空间很大。这就是为什么 AOT 编译(提前)是发布用于生产的 Angular 应用程序的默认和推荐方式的原因。

解决方案

您的 API 根本不应返回 HTML。单页应用程序 (SPA) 背后的整个想法是让它们使用与语言和平台无关的 API。它仅适用于数据，如今这些数据主要通过 JSON 符号进行编码。这是 API 应该理解的唯一语言。

根据我从您在此处发布的代码示例中收集到的信息，您对这种形式的数据感兴趣:

{ linkId: 960,
  link: 8,
  text: individuals }

创建一个以这种形式返回数据的 API 端点，然后使用 Angular 循环数据并创建您需要的模板。

<span *ngFor="let item of items"
       (click)="triggerClick()"
       [attr.data-link-id]="item.linkId"
       [attr.data-link]="item.link"
       class="level_modal">
  {{ item.text }}
</span>

当然，您可能并不需要所有这些 data- 属性。这是因为 Angular 应用程序应该关注模型。模型是用于创建模板的真实来源。如果您需要有关每个项目的附加信息(例如 link 和 linkId)，只需将其作为对象保存在内存中即可。无需将其编码为 HTML 以便稍后再次阅读。