Как сделать так, чтобы Angular Component появился в HTML-шаблоне?

Question

Я занимаюсь разработкой веб-приложения, используя Angular 6 . У меня есть небольшая проблема: с этим простым кодом внутри одного из моих сервисов:

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

Я могу динамически отображать HTML-код при каждом запуске. Это происходит, однако, только потому, что это собственный HTML-тег. Как я могу сделать то же самое с компонентом Angular, связанным с шаблоном HTML? Например, это не работает таким образом ...

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

Можете ли вы помочь мне с решением, которое использует несколько строк кода? Я должен использовать этот метод в службе. Спасибо.

Answer 1

Вы должны поместить свой компонент в DOM и использовать * ngIf, или какой-нибудь другой способ защиты, чтобы решить, когда показать его:

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

переменная showComponent будет установлена ​​в true / false в зависимости от условий, в которых вы указываете, когда показывать ваш компонент.