如何将数据表分页器模板添加到 Angular ngx 数据表

Question

我正在尝试为泳道 ngx 数据表 (https://github.com/swimlane/ngx-datatable) 创建自定义分页。

页脚的自定义模板工作正常（根据文档：http://swimlane.github.io/ngx-datatable/#footer），分页也按预期工作，但请注意 DOM 组件中有一个自定义分页器代码。这没有出现在前端，因为该组件似乎不接受自定义模板。

有谁知道，将自定义模板添加到 ngx-datatable 的数据表分页器的正确方法是什么？

我的具体问题是，我需要将默认的左右元素更改为 fontawesome 组件，但也许我还想在那里进行一些其他的外观或功能更改。

我的代码是。

<ngx-datatable
                        *ngIf="(files | objectPropertyLikeStringPipe:fileNameLikeDataContract | objectHasTagPipe:searchTags:'tags').length"
                        class="classic show-overflow"
                        bbsNgxResizeWatcher
                        [rowHeight]="undefined"
                        [columnMode]="'flex'"
                        (activate)="tableActivate($event)"
                        [rows]="files | objectPropertyLikeStringPipe:fileNameLikeDataContract | objectHasTagPipe:searchTags:'tags'"
                        [sorts]="[{prop:'type',dir:'asc'},{prop:'fileName',dir:'asc'}]"
                        [columns]="columns"
                        [selected]="selected"
                        [selectionType]="'checkbox'"
                        (select)="onSelect($event)"
                        [limit]="2"
                        [footerHeight]="50"
                >
                    <ngx-datatable-footer>
                        <ng-template
                                ngx-datatable-footer-template
                                let-rowCount="rowCount"
                                let-pageSize="pageSize"
                                let-selectedCount="selectedCount"
                                let-curPage="curPage"
                                let-offset="offset"
                                let-isVisible="isVisible">
                            <div class="page-count">
                                <span *ngIf="selectedMessage">
                                  {{selectedCount.toLocaleString()}} {{selectedMessage}} /
                                </span>
                                {{rowCount.toLocaleString()}} {{totalMessage}}
                            </div>
                            <datatable-pager
                                    #ngxDatatablePager
                                    [pagerLeftArrowIcon]="'datatable-icon-left'"
                                    [pagerRightArrowIcon]="'datatable-icon-right'"
                                    [pagerPreviousIcon]="'datatable-icon-prev'"
                                    [pagerNextIcon]="'datatable-icon-skip'"
                                    [page]="curPage"
                                    [size]="pageSize"
                                    [count]="rowCount"
                                    [hidden]="!((rowCount / pageSize) > 1)"
                                    (change)="ngxDatatable.onFooterPage($event)">
                                <ng-template>
                                    <ul class="pager">
                                        <li [class.disabled]="!ngxDatatablePager.canPrevious()" [class.target-p]="true">
                                            <a
                                                    role="button"
                                                    aria-label="go to first page"
                                                    href="javascript:void(0)"
                                                    (click)="ngxDatatablePager.selectPage(1)">

                                                <fa-icon    [icon]="['fal', 'angle-left']"
                                                ></fa-icon>
                                                <p>asdklslac</p>
                                            </a>
                                        </li>
                                        <li [class.disabled]="!ngxDatatablePager.canPrevious()">
                                            <a
                                                    role="button"
                                                    aria-label="go to previous page"
                                                    href="javascript:void(0)"
                                                    (click)="ngxDatatablePager.prevPage()">
                                                <i class="{{pagerLeftArrowIcon}}"></i>
                                            </a>
                                        </li>
                                        <li
                                                role="button"
                                                [attr.aria-label]="'page ' + pg.number"
                                                class="pages"
                                                *ngFor="let pg of pages"
                                                [class.active]="pg.number === page">
                                            <a
                                                    href="javascript:void(0)"
                                                    (click)="ngxDatatablePager.selectPage(pg.number)">
                                                {{pg.text}}-1
                                            </a>
                                        </li>
                                        <li [class.disabled]="!ngxDatatablePager.canNext()">
                                            <a
                                                    role="button"
                                                    aria-label="go to next page"
                                                    href="javascript:void(0)"
                                                    (click)="ngxDatatablePager.nextPage()">
                                                <i class="{{pagerRightArrowIcon}}"></i>
                                            </a>
                                        </li>
                                        <li [class.disabled]="!ngxDatatablePager.canNext()">
                                            <a
                                                    role="button"
                                                    aria-label="go to last page"
                                                    href="javascript:void(0)"
                                                    (click)="ngxDatatablePager.selectPage(totalPages)">
                                                <i class="{{pagerNextIcon}}"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </ng-template>
                            </datatable-pager>
                        </ng-template>
                    </ngx-datatable-footer>

                </ngx-datatable>

视觉输出（PS！分页仍然是默认的。它没有使用我的分页ng-template！）：

Answer 1

根据“pager.component.ts” - 你不能自定义它（'datatable-pager' 组件）。 您可以尝试使用类似的行为创建自己的。