css - 我有一个关于 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 以及垂直显示的页面。

从教程中，我找到了添加到我的 styles.css 文件中的 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 样式没有任何影响。假设样式是正确的（我可以稍后由 css 开发人员更改它们），您是否可以使用 <pagination-template 发送答案，其中包括如何应用样式。

谢谢！

Answer 1

您可以尝试覆盖 ngx-paginator 样式。

在使用该分页器的 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;
    }

}

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