我对 angular 中的 ngx 分页设计有一个简单的问题

Question

我已经使用 ngx-pagination 在 angular 8 应用程序中成功实现了对来自服务器的结果的分页。

这是模板：

<pagination-template #p="paginationApi"
                            (pageChange)="p2 = $event">

                            <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
                                <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
                            </div>

                            <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
                                <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                                    <span>{{ page.label }}</span>
                                </a>
                                <div *ngIf="p.getCurrent() === page.value">
                                    <span>{{ page.label }}</span>
                                </div>
                            </div>

                            <div class="pagination-next" [class.disabled]="p.isLastPage()">
                                <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
                            </div>
                    
                      </pagination-template>

我没有包含来自.ts 文件的详细信息，因为它与问题无关，分页工作包括单击/选择不同的页面。 看一下附图，这样你就可以看到分页：

从图片中可以看出，问题只是控件的设计，没有应用 css 并且页面垂直显示。

从教程中我发现了 css 元素，我将其添加到我的 styles.css 文件中，如下所示：

 .custom-pagination .page-number{
        display: inline-block;
        /* padding: 5px 12px; */
        background: #afffe6;
        margin: 0px 4px;
        border-radius: 25px;
    }
    
    .page-number.current{
        background: #ffffff!important;
        border: 2px solid #458873;
    }
    
    .page-number span{
        display: block;
        width: 28px;
        height: 28px;
        font-size: 18px;
        cursor: pointer;
    }
    
    .pagination-previous,.pagination-next{
        display: inline-block;
        font-weight: bold;
    }

这个 css styles 没有影响。 假设 styles 是正确的（我可以稍后由 css 开发人员更改它们）您可以发送带有 <pagination-template 的答案，其中包括如何应用 styles。

谢谢！

Answer 1

您可以尝试覆盖 ngx-paginator styles 。

在使用该分页器的 HTML 的 scss 文件中，尝试以下操作：

:host ::ng-deep {

  .custom-pagination .page-number{
        display: inline-block;
        /* padding: 5px 12px; */
        background: #afffe6;
        margin: 0px 4px;
        border-radius: 25px;
    }
    
    .page-number.current{
        background: #ffffff!important;
        border: 2px solid #458873;
    }
    
    .page-number span{
        display: block;
        width: 28px;
        height: 28px;
        font-size: 18px;
        cursor: pointer;
    }
    
    .pagination-previous,.pagination-next{
        display: inline-block;
        font-weight: bold;
    }

}

这只是一个例子。 您必须 select 浏览器中的分页器元素并检查 angular 对其“命名”的确切方式（为了知道您必须在 scss 中使用的确切名称以覆盖特定元素）。