Как сделать копию компонента в 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>

это работает, но, вероятно, это не очень хорошая практика, поскольку один и тот же идентификатор используется в разных местах. как я могу избавиться от дубликата кода? Что мне делать в моей ситуации?

Answer 1

Вам нужно иметь id для уникальной идентификации динамически назначенного вместо жестко закодированного id="listing_pagination"

Иметь массив paginationConfig и push-конфиги для каждого набора данных

• реализация файла ts

private paginationConfigs: Array; // define the variable 
this.paginationConfigs = []; //initialize in the ngOnInit lifecycle function 

Иметь следующую конфигурацию для каждого набора данных, вероятно, внутри цикла

                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>