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>

Angular-重复编写子组件的简短文字

2 个答案: