“ng-bootstrap”和“ngx-bootstrap”有什么区别?

时间:2017-05-03 11:12:09

标签: angular ng-bootstrap ngx-bootstrap

“ng-bootstrap”和“ngx-bootstrap”有什么区别?它们是否相互关联?或者它们只是并发实现?

有人和他们一起工作过,可以给出/解释两者的利弊吗?

使用“ng-bootstrap”我的意思是https://ng-bootstrap.github.io/#/home

“ngx-bootstrap”我的意思是http://valor-software.com/ngx-bootstrap/

两者都与Angular 4(不是AngularJS!)和Bootstrap 4相关。

请注意,这不是不是重复的difference between ngx-bootstrap and ng2 bootstrap?问题。

9 个答案:

答案 0 :(得分:158)

ng-bootstrap和ngx-bootstrap是两个不同项目团队的两个不同的项目,他们试图完成或多或少相同的事情 - 允许你在不使用jQuery的情况下在Angular(2+)中使用Bootstrap。

他们都只使用Angular(没有jQuery)重建Bootstrap组件。主要区别在于他们支持哪个版本的Bootstrap。

  • ngx-bootstrap支持Bootstrap 3和4.
  • ng-bootstrap支持Bootstrap 4并需要Angular 5 +。

这意味着如果你需要使用Bootstrap版本3,那么ngx-bootstrap是你唯一真正的选择。如果你可以使用Bootstrap 4,那么你可以在两个项目之间进行选择。

另一个(潜在的重大)差异是项目背后的团队。在这方面要注意的关键点是ng-bootstrap背后的团队还负责angular-ui-bootstrap - Bootstrap库的AngularJS(即1.x)版本。

答案 1 :(得分:24)

我正在考虑将什么用于我的项目,然后在比较两个项目后我认为ngor-bootstrap由valor-software是一个更好的选择,因为它的动态内置于它的模态组件中。 Ng-bootstrap动画仍然不存在,没有动画的模式弹出是一个主要的无聊。其他原因是Ng-bootstrap仍处于测试阶段,与ngx-bootstrap(已经有一个候选版本已经推出)(12.22.2017)相比,我无法将它用于我的生产应用程序。不过,我希望这两个项目都能带来好运,并希望能找到可靠的解决方案。

答案 2 :(得分:18)

我同时使用了ngx-bootstrap(由Valor开发)和ng-bootstrap(由ng-boostrap开发)。这是我从中获得的独特功能的两分钱:

ngx-bootstrap:

  1. 内置动画支持几乎所有内容(模式,手风琴,collpase,下拉菜单,日期选择器...)
  2. 更好的模态支持(嵌套模态,模态即服务,模态为模板)
  3. 可固定组件(具有拖放功能)

ng-bootstrap:

  1. 导航功能(已淘汰标签集)
  2. 内置烤面包成分
  3. 包装尺寸几乎是ngx-bootstrap(缩小+压缩)的一半

您还可以将其npm下载计数与npmtrends进行比较。

[注意:我的答案基于当前最新版本,即ngx-bootstrap v5.5.0和ng-boostrap v6.0.0]

答案 3 :(得分:13)

同意@Dilshan。我还决定为我们的新产品选择ngx-bootstrap。经过一些研究,我发现ngx更成熟,更稳定。 ng-bootstrap正在开发中。

一个很好的参考资源,CoreUI.io有一个完整的功能CoreUI + Angular 5.x + ngx-bootstrap sample project。我实际上从这个项目中学习了ngx。  您可以浏览其实时预览或下载项目包。

答案 4 :(得分:4)

其中一个区别在于日期选择器使用的格式。 ng-bootstrap使用一个对象,但ngx-bootstrap将采用一个更容易使用的字符串。

答案 5 :(得分:3)

ng-bootstrap似乎不受支持 - 顶级请求是appendTo正文,维护者说他没有处理该项目。

我一直在把所有东西都换成ngx-bootstrap

答案 6 :(得分:3)

答案不多,只是扩展注释...

我不确定球队是否独立。运行npm view ngx-bootstrapnpm view ng-bootstrap表明两者都是使用相同的电子邮件帐户发布的。

我认为这两个团队是相关的。

npm视图 ngx -引导程序

C:\:
17:07:25.16>npm view ngx-bootstrap

ngx-bootstrap@3.0.1 | MIT | deps: none | versions: 40
Native Angular Bootstrap Components
https://github.com/valor-software/ngx-bootstrap#readme

keywords: angular, bootstap, ng, ng2, angular2, twitter-bootstrap

dist
.tarball https://registry.npmjs.org/ngx-bootstrap/-/ngx-    bootstrap-3.0.1.tgz
.shasum: e98d2fc6340f32a9d358cd08e8fda7dcb23bdab3
.integrity: sha512-ni91yYtn8ldgf/pxrlwl9lkVcLURGzopSpJnEbbgG1v1EZWTobI8y7J3mx4Kxptkn0EeiQwnLel67G7XJSox4A==
.unpackedSize: 8.4 MB

maintainers:
- valorkin <valorkin@gmail.com>

dist-tags:
latest: 3.0.1       next: 3.0.1         test: 0.0.0-test.0

published a month ago by valorkin <valorkin@gmail.com>

npm视图 ng -引导程序

C:\:
17:16:42.36>npm view ng-bootstrap

ng-bootstrap@1.6.3 | MIT | deps: 1 | versions: 8
Native Angular Bootstrap Components
https://github.com/valor-software/ngx-bootstrap#readme

keywords: ng, ng-bootstap, angular, angular2, bootstrap, twitter-bootstrap

dist
.tarball https://registry.npmjs.org/ng-bootstrap/-/ng-bootstrap-1.6.3.tgz
.shasum: d41fd42154c0593422cb83c473a3828aa7525bf5

dependencies:
moment: 2.18.1

maintainers:
- pkozlowski_os <pkozlowski.opensource@gmail.com>
- ng-bootstrap <foxandxss@gmail.com>

dist-tags:
beta: 1.1.16-3  latest: 1.6.3

published a year ago by valorkin <valorkin@gmail.com>

答案 7 :(得分:1)

问题中提到的ng-bootstrap(位于https://ng-bootstrap.github.io的那个)不是npm软件包ng-bootstrap。

相反,npm软件包是@ ng-bootstrap / ng-bootstrap

它是由另一个团队开发的。

$ npm视图@ ng-bootstrap / ng-bootstrap

@ ng-bootstrap / ng-bootstrap @ 3.2.0 |麻省理工学院部门:1 |版本:61 角动力靴 https://github.com/ng-bootstrap/ng-bootstrap#readme

npm软件包ng-bootstrap看起来确实是ngx-bootstrap的旧版本。

答案 8 :(得分:0)

这取决于需求,但根据经验,由于以下原因,ng-bootstrap通常更适合:

  • ng-bootstrap有更多星星
  • ng-bootstrap是相对较新的解决方案
  • ng-bootstrap更轻

如果我没有任何特定原因要进行引导程序3,则应首选ng-bootstrap。

有关事实和数据的更多详细信息,请参考以下github仓库: