时间戳

首页 > 解决方案 > 如何将 html 字符串解析为原生 Angular 模板

javascript - 如何将 html 字符串解析为原生 Angular 模板

问题描述

目前，在绕过用于呈现内容的角度清理机制后，我正在使用 innerHtml 属性呈现 html 字符串。但无法将事件处理程序映射到角度组件中的函数。

例如，html 字符串将包含一个如下所示的按钮

<button (click)="callme()">Click</button>

callme 函数将成为角度组件文件的一部分。我希望这个点击事件在角度函数中处理。

是否可以将此字符串解析为 html dom 并处理角度组件中的事件。

描述此场景并使用角度 cdk 门户的示例代码。 https://stackblitz.com/edit/angular-upaudh?file=src%2Fapp%2Fcdk-portal-overview-example.ts

标签： javascripthtmlangulardomdom-events

解决方案

有两种方法可以实现它，这取决于你想要什么。

  • 简单的方法是像这样使用innerHtml输入：

HTML

<div [innerHTML]="htmlStr"></div>

TS

htmlStr: 'Hello';
  • 如果您想创建一个在构建时将转换为 HTML 的动态模板。然后你必须使用Portals。

PS：在您的示例中（在评论中），您使用[innerHtml]并尝试将其绑定到 Portal 中。同样[innerHtml]不会在运行时之前被翻译，因此您的点击事件将与您的组件不在同一范围内。你问的是 github 中的公开对话： Issue。现在，您可以使用上述替代方案来解决您的问题。您可以使用innerHtml, 然后使用 renderer2 或本机元素引用将点击事件绑定到您的函数，在它们呈现在视图上之后。

推荐阅读