angular5 ng-bootstrap和ngx-bootstrap区别

最新推荐文章于 2024-03-20 09:40:03 发布

转载最新推荐文章于 2024-03-20 09:40:03 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mttcug/p/7994066.html

文章标签：

#javascript #ViewUI

本文介绍了如何在Angular项目中安装并使用ngx-bootstrap和ng-bootstrap两个库提供的分页组件。详细说明了安装步骤、引入CSS样式及在module与component中应用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://angular.cn/resources

ngx-bootstrap

安装：

npm install ngx-bootstrap --save

再引入css

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

还需要再引入 theme

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

使用方法

一、module文件中引入模块


import { PaginationModule } from 'ngx-bootstrap/pagination';

@NgModule({
  imports: [PaginationModule.forRoot(),...]
})
export class AppModule(){}

二、在在component中使用

<pagination [boundaryLinks]="true" [totalItems]="infoList.total_num" (pageChange)="pageChange($event)" [(ngModel)]="pageNo" class="pagination-sm"
            previousText="上一页" nextText="下一页" firstText="第一页" lastText="最后一页">

</pagination>

ng-bootstrap

安装：

npm install --save @ng-bootstrap/ng-bootstrap

再引入css

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">



使用方法:

一、module文件中引入模块

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

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

二、在在component中使用

<ngb-pagination class="d-inline-block" (pageChange)="pageChange($event)" [collectionSize]="infoList.total_num"
                  [(page)]="pageNo" aria-label="Default pagination" [maxSize]="5"
                  [boundaryLinks]="true">
      </ngb-pagination>



总结，ng-bootstrap 以需要引入ngbModule，任何组件，如分页，tab,datapicker......都可以使用了,
但是ngx-bootstrap必须使用哪个组件就引入哪个组件

个人推荐使用ngx-bootstrap

转载于:https://www.cnblogs.com/mttcug/p/7994066.html