Как обернуть Angular компонент вокруг динамического c компонента - PullRequest
Новая
       14

Как обернуть Angular компонент вокруг динамического c компонента

1 голос
/ 25 января 2020

У меня есть приложение, которое нуждается в горизонтальной прокрутке для разных типов списков. Это приложение musi c, поэтому у меня есть горизонтальная прокрутка для изображений альбомов, избранных изображений и т. Д. c. Я сгенерировал html, который создает горизонтальную прокрутку для списка элементов альбома, например: 

<div class="hs-grid">
  <div class="hs full"">
      <app-album-item *ngFor="let releaseEl of releases" [submission]="releaseEl"></app-album-item>
  </div>
</div>

, который создает что-то вроде этого: enter image description here

Мой вопрос: как я могу преобразовать сетку html в компонент, чтобы мне не пришлось дублировать код сетки для каждого из различных типов горизонтально прокручиваемых элементов. По сути, что-то вроде: 

<app-horizontal-scroll-grid>
    <app-album-item *ngFor="let releaseEl of releases" [submission]="releaseEl"></app-album-item>
    <!-- IT CAN ALSO BE FEATURED ITEMS -->
    <app-featured-item *ngFor="let featuredItem of featured" [featuredItem]="featuredItem"></app-featured-item>
</app-horizontal-scroll-grid>

Очевидно, что это не сработает ...

Как мне пройти через список элементов, которые будут использоваться внутри horizontal-grid-component, поскольку это может быть другой тип компонента , такой как:

  • app-album-item
  • app-featured-item
  • et c?

Я знаю, что если бы у меня был только один тип компонента, который мне нужен для горизонтальной прокрутки, я мог бы поместить app-album-item внутри horizontal-scroll-grid компонента HTML и пройти через список элементов к @Input(), но так как тип компонента меняется, я немного запутался!

Спасибо за любую помощь / понимание!

1 Ответ

1 голос
/ 25 января 2020

Директива ng-content позволяет динамически вставлять компоненты и содержимое HTML в другой компонент. Эта статья от Angular Университет дает более подробную информацию о проекции контента в Angular.

Вы можете определить шаблон компонента "скроллер" как: 

<div class="hs-grid">
  <div class="hs full"">
    <ng-content></ng-content>
  </div>
</div>

И включите другие компоненты внутри скроллера в шаблон родительского компонента: 

<app-horizontal-scroll-grid>
  <app-album-item *ngFor="let releaseEl of releases" ...></app-album-item>
</app-horizontal-scroll-grid>

См. этот стек для демонстрации.

...