Наследование шаблона и / или композиция

Question

Мы создаем приложение, состоящее из множества карточек (представьте себе доску с липкими заметками).Эти карты будут иметь некоторые общие характеристики: та же логика для заголовка, функциональность «назначить», возможность максимизации / свертывания и т. Д. Однако содержимое этих карт может быть другим: текст, изображение, сетка, пользовательский компонент и т. Д.

Первое, что приходит мне в голову - это создать родительский класс Card с шаблоном, подобным следующему:

<h2>Card header and shared elements</h2>
<cardContent></cardContent>

Где cardContent будет заменен наактуальное содержание.Затем расширьте этот класс для PictureCard, TextCard и т. Д. И как-нибудь передайте / установите cardContent.

Как бы вы сделали это в Angular?Это неправильный подход?

Answer 1

Вы хотите использовать проекцию контента, которая ранее была известна как transclusion.

С проекцией контента у вас в основном есть некоторые общие элементы, но вы также можете передавать дополнительный контент, любой контент, который вам нравится.

Это работает примерно так (мы назовем этот компонент fred):

<h2>{{title}}</h2> 
<ng-content></ng-content>

Заголовок будет передан как @Input.Компонент, который использует fred, будет выглядеть следующим образом:

<fred [title]="i will appear as title">
  <div>I will be displayed where ng-content is</div>
  <p>i can be anything you want</p>
</fred>

<fred [title]="i will appear as a different title">
  <a-different-component></a-different-component>
</fred>

Здесь мы используем fred дважды, передавая совершенно другой контент.

Вот учебник:

https://codecraft.tv/courses/angular/components/content-projection/

Это общий подход для пользовательских модальных моделей, когда большая часть структуры одинакова - например, модальное название, модальный нижний колонтитул и т. Д., Но когда содержимое модального тела различается каждый раз.

Извините, я не могу найти официальные документы по этому вопросу, но эта ссылка хороша.

Самое замечательное в угловом проектировании контента - то, что вы можете иметь несколько слотов контента, что означает, что вы можете проецировать их в несколько мест, если это необходимо.Что делает Angular проекцию контента самой мощной из доступных систем проекции контента.# ReactCantBeatThis

Сказав все это, вы можете использовать некоторые из готовых библиотечных решений, таких как карта primeng:

https://www.primefaces.org/primeng/#/card

Есть много библиотектам на выбор!primeng является одним из лидеров.