如何使用Angular将处理程序与现有HTML连接起来

Question

我正在编写一个Angular应用程序，用于获取并显示一些现有的HTML文档。

我使用服务来获取大型预先存在的文档（来自第三方）并在面板中显示它们（使用innerHtml绑定）。

<div class='legal-doc-panel' [innerHtml]='doc'></div>

这可以按预期工作。

我正在撰写的应用程序增加了现有文档的附加信息。

我想检测用户何时悬停/点击“导入的”HTML中的各种元素，并在单独的面板中显示其他内容。

基本上我想把鼠标处理程序挂钩到我带入页面的一些元素（通过innerHtml）并回复它们。

建议/最干净的方法是什么？ 任何建议将不胜感激。

Answer 1

Angular并不知道你在innerHtml中投入了什么。但是你可以在Angular知道的主元素中听取事件：

<div class='legal-doc-panel' [innerHtml]='doc' (myEvent)="onMyEvent()"></div>

在你的内部html中，你可以像使用EventEmitter的组件一样发出事件。这样的事情可能是：

var event = new CustomEvent("myEvent", {
    someData: 'foo'
});

hostElement.dispatchEvent(event);

无论如何，我会建议最干净的解决方案是不要使用innerHtml。相反，您的服务器可以为您提供JSON，并使用Angular构建html。

如果您无法控制插入的html，则可以在插入innerHtml后在component.ts中使用vanilla JavaScript。只需搜索div中的元素，并像使用常规JavaScript一样使用addEventListener（）。