" />

angular7 ng-bootstrap和ngx-bootstrap区别

2019/1/9 20:08:41 人评论 次浏览 分类:bootstrap ui

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  文档 http://ng-bootstrap.com
安装: 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

附件下载

相关资源

    暂无相关的资源...