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>

所以我基本上在页眉和页脚中显示相同的组件两次。

有什么方法可以 DRY 吗？

我可以在某个地方存储我将在该视图的所有寻呼机组件中使用的所有属性绑定、事件等吗，这样我就不必重复所有内容两次（如果我多次使用它，则不必重复两次）同一页上的次数）?

记住它的动态特性，所以在另一个视图中我将使用其他绑定 - 例如 [back]="'newsList'" [detail]="'news'" 所以我可以'将该数据存储在寻呼机组件中。

Answer 1

我认为最简单的方法是使用`ng-template，这可能是一个实现：

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

然后您可以在模板中的任意位置使用它：

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

Answer 2

您可以像这样使用 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>

Angular - 重复子组件的简写

Angular - short writing of duplicate child component

dry