Angular 13 从 HTML 字符串加载/编译动态 Angular 组件答案

【问题标题】：Angular 13 load/compile dynamic Angular component from HTML stringAngular 13 从 HTML 字符串加载/编译动态 Angular 组件
【发布时间】：2022-08-17 01:39:10
【问题描述】：

我想要加载或编译Angular elements as HTML 从 string 到我的组件。

我从 API 获取 HTML 字符串作为字符串，我想从该字符串加载和呈现所有 HTML 结构指令。

 let str = `<div>Testing here
  <div *ngFor=\"let i of [1,2,3,4]\">{{i}}</div>
 </div>`;

setTimeout(() => {
  const componentRef: ComponentRef<DynamicComponent> =
    this.createDynamicComponent<DynamicComponent>(
      DynamicComponent,
      this.vc
    );
  componentRef.instance.html = this.sanitizer.bypassSecurityTrustHtml(str);
});

但它输出为而不是ngFor 循环，它只是作为字符串加载。

Load Dynamic HTML
Testing here
{{i}}

Here is sample I tried

以上只是示例 HTML 字符串。它可以是来自服务器的任何东西，例如 ngIf 或任何其他内置的 Angular 指令

我也尝试过使用自定义元素createCustomElement，但我也无法渲染Angular directives runtime from string。

编辑 1

对于This stackblitz 示例，类似的事情工作正常，但如果我下载并在本地运行同样的错误。

是的..恐怕这行不通。
@MikeOne 在较旧的 AngularJS 中，我们能够使用解析语法并在运行时对其进行编译。我不确定在 Angular 13 中该怎么做。
我没有使用过 Angular，因为他们将 A1 到 A2 称为“升级”；但这不会允许（潜在的）XSS 攻击吗？它与eval 的行为相同
是的，我同意它会允许 XSS 攻击，但是由于我有一些功能，我允许用户创建 HTML 模板并将其保存到数据库中并希望在运行时加载。
Angular 决定在编译时应用哪些指令。它不再解析那些指令运行时。有一些非常讨厌的技巧可以让你接近你需要的东西，但它的缺点通常太大了。不过，在即将发布的 Angular（动态 hostDirectives）中，这可能会变得更容易一些。如果我是你，我会重新考虑这一点。

标签： javascript angular web-component angular-directive

【解决方案1】：

我在stackblitz 下载了这个例子并让它工作。你可以在这里看到完整的代码 - https://github.com/phalgunv/Angular-Dynamic-Component-From-String

它需要进行一些修复才能使其适用于产品构建。

【讨论】：