Angular - короткая запись дублирующего дочернего компонента

Question

У меня есть 2 одинаковых компонента пейджера в родительском компоненте:

<header>
<pager [prev]="prev" [next]="next" [back]="'songs'" [detail]="'song'" [additional]="exit" [header]="'Please choose a song'"
 (changed)="onChangePage($event)"></pager>
</header>

... list of songs, etc.

<footer>
<pager [prev]="prev" [next]="next" [back]="'songs'" [detail]="'song'" [additional]="exit" [header]="'Please choose a song'"
 (changed)="onChangePage($event)"></pager>
</footer>

Таким образом, я в основном отображаю один и тот же компонент дважды, в верхнем и нижнем колонтитулах.

Есть ли способ СУХОЙ?

Могу ли я где-то хранить все привязки свойств, события и т. Д., Которые я буду использовать во всех компонентах пейджера в этом представлении, поэтому мне не нужно повторять все дважды (или больше, если я использую его несколько раз на одной странице)

Имейте в виду его динамическую природу, поэтому в другом представлении я буду использовать другие привязки - например, [back] = "'newsList'" [detail] = "'news'", поэтому я не могу сохранить эти данные в компонент пейджера.

Answer 1

Вы можете использовать ng-template и ng-container следующим образом:

<ng-template #dryPager>
  <pager [prev]="prev" [next]="next" [back]="'songs'" [detail]="'song'" 
    [additional]="exit" [header]="'Please choose a song'"
    (changed)="onChangePage($event)"></pager>
</ng-template>

<header>
  <ng-container *ngTemplateOutlet="dryPager"></ng-container>
</header>

<footer>
  <ng-container *ngTemplateOutlet="dryPager"></ng-container>
</footer>

Answer 2

Я думаю, что самый сухой способ - это использовать `ng-template, это может быть реализация:

<ng-template #pagerTemplate>
    <pager></pager>
</ng-template>

И тогда вы можете использовать его где угодно в своем шаблоне:

<ng-container *ngTemplateOutlet="pagerTemplate"></ng-container>