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


231

“ 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有关。

请注意,这不是ngx-bootstrap和ng2 bootstrap之间区别的重复问题吗?


17
ngx-bootstrapsuppprts引导3&4,而ng-bootstrap(在AngularJs UI的自举)仅支持引导4.
developer033

1
我认为@snorkpete答案值得将其设置为正确答案,他花了一些时间找到答案并将其编写。回来阅读您在stackoverflow中提出的问题的答案,然后复查它们是一种很好的文化,如果您对此感到满意,请选择它作为正确的答案
hossein bakhtiari

Answers:


213

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

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

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

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

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


3
这是两个团队负责人的问题。从外部看,他们的目标略有不同,因此我想这可能与目标有关,但这只是我的推测
snorkpete

如果我们在角度项目中都包含两个库,会不会有问题?如果是这样,预计会出现什么问题?
RITZ XAVI

可能是可行的,但似乎太过分了。如果您不太在意,并且您正在使用Bootstrap 4,只需选择一个(如果需要,可以随机选择)。
snorkpete

38

我当时在考虑将什么用于我的项目,然后在比较了两个项目之后,我认为使用valor-software的ngx-bootstrap是更好的选择,因为它的模态组件内置了动画。Ng-bootstrap动画仍然不存在,没有动画的模式弹出是一个令人讨厌的现象。另一个原因是Ng-bootstrap仍处于beta中,与ngx-bootstrap相比,我无法在生产应用程序中使用它,该版本已经有候选发布版本(12.22.2017)。但是,我希望两个项目都好运,并希望提出可靠的解决方案。


3
Ng-bootstrap 1.0.0现在可用,并且AOT编译器可以正常编译。参见github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md
Stevethemacguy,

16

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

作为很好的参考资源,CoreUI.io具有功能齐全的CoreUI + Angular 5.x + ngx-bootstrap示例项目。我实际上从这个项目中学到了ngx。您可以浏览其实时预览或下载项目包。


8
取决于您如何定义“成熟”,因为ngx-bootstrap甚至没有对任何事物进行单一测试。如ng-bootstrap似乎对所有内容都进行了测试。
朗格(Ricki Runge)

很高兴知道,谢谢您的分享。我相信ng-bootstrap是正确的方法。我提到成熟只是因为它是在一周前发布的。(“该图书馆正在建设中……”)
Jiping,

4
在当今的开源前端生态系统中,成熟似乎意味着“已在2个月前发布”。;)
埃里克·索克

9

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

ngx-bootstrap:

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

ng-bootstrap:

  1. 导航功能(已弃用标签页)
  2. 内置Toast组件
  3. 封装大小几乎是ngx-bootstrap的一半(缩小+压缩)

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

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


7

他们的日期选择器使用的格式之间有一个区别。ng-bootstrap使用一个对象,但是ngx-bootstrap将采用一个更易于使用的字符串。


7

似乎不支持ng-bootstrap-最高要求是appendTo正文,维护者说他不在项目上。

我一直都在切换到ngx-bootstrap



4

与其说是扩展评论,不如说是一个答案...

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

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

npm查看ngx -bootstrap

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 -bootstrap

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>

9
ng-bootstrapngx-bootstrap的旧名称。对于ng-bootstrap.github.io,npm软件包名称为@ ng-bootstrap / ng-bootstrap,即npm view @ng-bootstrap/ng-bootstrap
atao

1
听起来更像是来自ng-bootstrap的“ valorkin”家伙,并为ngx打开了自己的团队“ valor软件”
Facundo Colombier
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.