如何在运行时生成带有字符串的 Angular 组件？答案

【问题标题】：How to generate an Angular component with string at runtime?如何在运行时生成带有字符串的 Angular 组件？
【发布时间】：2017-08-30 17:00:25
【问题描述】：

我在运行时从数据库中提取了一个与 Angular 选择器相对应的属性。

this.stringSelector = "<app-hello></app-hello>";

像这样渲染“Hello World”的最佳方式是什么？

<app-root>
  <app-hello></app-hello>
</app-root>

这仅适用于 html 标签，不适用于 Angular 选择器：

<app-root>
  <div [innerHTML]="this.stringSelector | safe: 'html'"></div>
</app-root>

app-hello 组件只做一件事：

@Component({
  selector: 'app-hello',
  template: `<h1>Hello World</h1>`
})
export class HelloComponent {
/* . . . */
}

【问题讨论】：

为什么要基于字符串生成组件？到底发生了什么？ stringSelector 可以是与 app-hello 不同的组件吗？
@JunKang 大多数用例我见过通过innerHTML 将HTML 内容投影到组件中。但是，我有一些用例，我希望根据收到的字符串动态生成视图。
是的，但是为什么。如果您只想动态生成组件/视图，只需使用 *ngIf。或者使用 router-outlet 并根据收到的字符串让应用程序路由到特定路由。我不明白您为什么要在 html 中动态生成组件选择器。
如果我想根据状态管理视图，*ngif-else 很好。如果我想基于静态模板/布局渲染视图，路由很好。两者都适用于我可以想象的许多用例。在我的用例中，一个相同的路由可以以任何顺序呈现由不同组件组成的视图。这些组件可能具有静态视图，但可能在运行时以不同的组合“调用”以生成具有不同用途的视图。

【解决方案1】：

Angular 6 通过一个名为 Angular Elements 的新功能解决了这个问题。

【讨论】：