如何在 Angular 中复制组件?

Question

我在项目中使用了 Angular 5。我使用 ngx 分页进行了分页。我需要做这个分页顶部和底部表。我需要在表格的顶部和底部进行分页。我这样做了

<div class="admin-panel__nav-block navigation-block">
<app-table-filter-size (valueChange)="valueChange($event)" [size]="size"></app-table-filter-size>
<pagination-controls class="table-pagination pagination-block" previousLabel="Previous" nextLabel="Next" id="listing_pagination" (pageChange)="pageChange(p = $event)"></pagination-controls>
</div>
<!--Table --> 
...
<!--Table End --> 
<div class="admin-panel__nav-block navigation-block">
<app-table-filter-size (valueChange)="valueChange($event)" [size]="size"></app-table-filter-size>
<pagination-controls class="table-pagination pagination-block" previousLabel="Previous" nextLabel="Next" id="listing_pagination" (pageChange)="pageChange(p = $event)"></pagination-controls>
</div>

它正在工作，但这可能不是一个好的做法，因为相同的ID在不同的地方使用。 如何摆脱重复的代码？在我的情况下我应该怎么做？

Answer 1

你需要有一个id来唯一地标识动态分配，而不是硬编码id="listing_pagination"

为每组数据提供一个分页配置数组和推送配置

• TS文件实现

private paginationConfigs： Array;//定义变量 this.paginationConfigs = [];在 ngOnInit 生命周期函数中初始化

对循环中的每个数据集进行以下配置

const pagerConfig = {
id: `pager-${value}`, // value could be any unique identifer
itemsPerPage: 10,
currentPage: 1
};
this.paginationConfigs.push(pagerConfig);

• HTML 文件实现

<tr *ngFor="let item of mf.data| paginate: paginationConfigs[i]" >// data display </tr>

<pagination-controls previousLabel="Previous" nextLabel="Next [id]='paginationConfigs[i].id'(pageChange)="pageChange(paginationConfigs[i].currentPage= $event)"></pagination-controls>