如何使 Angular 组件出现在 HTML 模板中？

Question

我正在使用 Angular 6 开发一个网络应用程序。我有一个小问题：在我的一项服务中使用这个简单的代码：

method() {
   document.body.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
}

我可以在每次运行时动态显示 html 代码。然而，发生这种情况只是因为它是一个原生 HTML 标记。如何使用与 HTML 模板关联的 Angular 组件做同样的事情？比如 ，这样就不行了……

method() {
  document.body.insertAdjacentHTML('beforeend','<myComponent>/myComponent>');
}

您能帮我提供一个使用几行代码的解决方案吗？我必须在服务中使用这种方法。谢谢。

Answer 1

您应该将组件放入 DOM 并使用 *ngIf 或其他一些保护来决定何时显示它：

<myComponent *ngIf="showComponent"></myComponent>

变量showComponent 将根据您关于何时显示组件的条件设置为真/假。