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>