zoukankan      html  css  js  c++  java
  • angular5 ng-bootstrap和ngx-bootstrap区别

    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
     


  • 相关阅读:
    spring子模块----->Spring Security------->相关教程(参考资料)
    Maven--->学习心得--->maven 概述
    Spring和Spring MVC 、Spring Security的关系
    leapMotion简介
    软件工程需求分析
    大型web网站-----系统架构
    Maven的安装与配置
    A Java Exception occured 解决
    mysql-5.7.20安装和配置
    线段树 poj 3667
  • 原文地址:https://www.cnblogs.com/mttcug/p/7994066.html
Copyright © 2011-2022 走看看