📌  相关文章
📜  如何为 Angular 2 ngb-pagination 实现 Bootstrap 4 - TypeScript (1)

📅  最后修改于: 2023-12-03 15:08:12.719000             🧑  作者: Mango

如何为 Angular 2 ngb-pagination 实现 Bootstrap 4 - TypeScript

在 Angular 2 中使用 ngb-pagination 实现 Bootstrap 4 的分页组件非常简单，只需要按照以下步骤进行设置即可：

首先，我们需要安装 ng-bootstrap 和Bootstrap4：

npm install --save @ng-bootstrap/ng-bootstrap
npm install bootstrap@4.0.0-alpha.6 --save

我们将在 AppModule 中导入 NgbModule 来启用 ng-bootstrap：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, NgbModule.forRoot()],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在我们已经准备好为 ngb-pagination 翻页器组件添加样式了，我们需要在 angular.json 中引入 Bootstrap 4 样式和脚本：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "../node_modules/bootstrap/dist/css/bootstrap.min.css",
              "styles.css"
            ],
            "scripts": [
              "../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  }
}

现在，我们可以在组件模板中使用 ngb-pagination：

<pagination [collectionSize]="23" [(page)]="page" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></pagination>

在 TypeScript 文件中，我们可以通过 ViewChild 来获取分页器的引用：

import { Component, ViewChild } from '@angular/core';
import { NgbPagination } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('pagination') pagination: NgbPagination;
  page = 1;
}

现在，你已经知道如何为 Angular 2 ngb-pagination 实现 Bootstrap 4 样式了！

参考文献