我對 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 中使用的確切名稱以覆蓋特定元素）。