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

Question

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

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将设置为true / false。