Повторно использовать один и тот же экземпляр компонента в html Angular

Question

           
            <!-- 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>
           

Я создал компонент нумерации страниц и использую его в верхней и нижней части страницы. Верхний и нижний пагинатор действует как два разных компонента. Когда я изменяю верхнюю нумерацию страниц, она должна синхронизироваться c с нижней, но этого не происходит. Можно ли как-то использовать один и тот же экземпляр компонента разбиения на страницы дважды, чтобы оба синхронизировались?

Answer 1

У меня есть другое решение: с помощью 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";

Answer 2

Похоже, вы отслеживаете текущую страницу в компоненте нумерации страниц. Я предполагаю, что это не синхронизируется между двумя. Вместо этого вы должны отслеживать его в родительском компоненте и передавать на нумерацию страниц в качестве входных данных. Либо так, либо создайте сервис для синхронизации c текущей страницы между двумя компонентами нумерации страниц.