Как вывести компонент в angular, который предоставляется через @Input ()?

Question

Я внедряю модальный всплывающий компонент. Он получает компонент через @Input(), который должен отображаться внутри всплывающего компонента.

Текущий код:

export class PopupComponent implements OnInit {
  @Input()
  component: any;

  constructor() {}

  ngOnInit(): void {}
}

шаблон:

<div class="popup">
  <div class="popup__content">
    <a class="popup__close">X</a>
    <div [outerHTML]="component"></div>
  </div>
</div>

И когда я предоставить такой компонент, как: <app-popup [component]="MyTestComponent"></app-popup>

Я получаю вывод определения компонента, например: class MyTestComponent implements OnInit ... Но я хочу увидеть его шаблон.

Какое решение?

Answer 1

Вы не можете пропустить компоненты через Input. Вам следует прочитать о включении и использовании тега ng-content.

Ваш шаблон компонента должен выглядеть следующим образом:

<div class="popup">
  <div class="popup__content">
    <a class="popup__close">X</a>
    <ng-content></ng-content>
  </div>
</div>

Тогда вы можете использовать свой компонент следующим образом:

<PopupComponent>
  <my-component></my-component>

  <!-- Or any content... -->
  <p>Anything</p>
</PopupComponent>

То, что находится между тегами PopupComponent, будет вставлять там, где тег ng-content находится в вашем шаблоне PopupComponent.

Если содержимое необходимо создавать динамически, вы также можете использовать Angular dynamici c загрузка компонента .