在 html Angular 中重复使用相同的组件实例两次答案

【问题标题】：Reuse same instance of a component twice in a html Angular在 html Angular 中重复使用相同的组件实例两次
【发布时间】：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>

我创建了一个分页组件，并在页面的顶部和底部使用它。顶部和底部分页器充当两个不同的组件。当我更改顶部分页时，它应该与底部分页同步，但这并没有发生。有什么办法可以两次使用相同的分页组件实例，以便两者同步？

【问题讨论】：

你能显示一些代码吗？
@PierreDuc 我已经用 html 代码更新了描述。请参考

标签： angular angular8

【解决方案1】：

看起来您正在分页组件中跟踪当前页面。我认为这是两者之间未同步的内容。相反，您应该在父组件中跟踪它并将其作为输入传递给分页。要么提供服务，要么在两个分页组件之间同步当前页面。

【讨论】：

非常感谢。你是对的。我应该从父组件跟踪所选页面并将其作为输入发送到分页组件。

【解决方案2】：

我有另一个解决方案：使用 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";

【讨论】：