在html角中两次重用同一个组件的实例
在html角中两次重用同一个组件的实例
提问于 2020-04-02 12:46:02
<!-- Top Pagination -->
<app-pagination-list [totalCount]='totalRecords' [limitPerPage]='16' (pageSelected)="pageSelected($event)"></app-pagination-list>
<!-- Patient List -->
<ul class="patients-list">
<li class="patients-list-item deactivated" *ngFor="let patient of patients" [ngClass]="{'deactivated': patient.is_activated == 0}">
<div class="patient-info-container">
<h3 class="patient-name mobile">
{{ patient.firstname }} {{ patient.lastname }}
</h3>
</div>
</li>
</ul>
<!-- Patient List End -->
<!-- Bottom Pagination -->
<app-pagination-list [totalCount]='totalRecords' [limitPerPage]='16' (pageSelected)="pageSelected($event)"></app-pagination-list>
我已经创建了一个分页组件，并且在页面的顶部和底部使用它。顶部和底部分页器充当两个不同的组件。当我更改顶部分页时，它应该与底部的分页同步，但这并没有发生。有任何方法可以使用同一实例的分页组件两次，以便两者是同步的吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-02 13:05:04
看起来您正在跟踪分页组件中的当前页面。我想这是两者之间没有同步的东西。相反，您应该在父组件中跟踪它，并将它作为输入传递给分页。或者创建一个服务来同步两个分页组件之间的当前页。
Stack Overflow用户
发布于 2020-04-02 13:14:30
i还有另一种解决方案:使用ngx-agination
*ngFor="let patient of patients | paginate: { itemsPerPage: 8, currentPage: p }"和您将下面的代码放入模板中
<pagination-controls (pageChange)="p = $event" style="float:right; ></pagination-controls>，并且必须导入ngxPagination模块并将其添加到导入中：
import { NgxPaginationModule } from "ngx-pagination";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60991913
复制相关文章
相似问题
腾讯云开发者
