Создайте базовый компонент для повторного использования при создании новых компонентов

Question

Я собираю приложение, в котором много модалов.Поскольку я не хочу повторять код модала, я хочу собрать базовый компонент, который имеет минимальную структуру, а затем с этой структурой, чтобы иметь возможность собирать различные модалы и нести то, что мне нужно внутри (форма, текст,images)

Пример того, что я хочу сделать

<app-modal-base>
  <app-form></app-form>
<app-modal-base>

Я надеюсь, вы понимаете, что я ищу.В случае, если вы не можете, кто-то нашел альтернативное решение?

Спасибо

Answer 1

В ваш базовый модальный шаблон включите тег <ng-content></ng-content>.Когда вы отображаете ваш модал, вы можете использовать его следующим образом:

<Modal>
  <div id="mydiv">
    <p> Simple paragraph </p>
    <form>...</form>
  </div>
</Modal>

Модал будет включать то, что вы включили между тегами <Modal></Modal> в том месте, где теги <ng-content></ng-content> находятся в шаблоне длябазовый модальный компонент.Это будет выглядеть так:

template: `
  <div id="closeButton"></div>
  <ng-content></ng-content>
`

Эта информация взята из этого источника , и я не могу найти официальные документы по этому поводу.Возможно, вам придется попробовать это.