“ng-bootstrap"和“ngx-bootstrap" ?

ng-bootstrapngx-bootstrap之间的区别是什么?它们之间有联系吗?或者它们仅仅是并发实现?

有人与他们一起工作,并能给出/解释两者的优点和缺点吗?

这里的ng-bootstrap指的是ng-bootstrap.github

这里的ngx-bootstrap是指valor-software-ngx-bootstrap

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

请注意,这是,是ngx-bootstrap和ng2 bootstrap的区别?的重复问题。

99092 次浏览

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

它们都只使用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——AngularJS(即1.x)版本的Bootstrap库。

我在考虑我的项目使用什么,然后在比较了两个项目后,我认为ngx-bootstrap by brave -software是一个更好的选择,因为它有动画内置在它的模态组件中。Ng-bootstrap动画仍然不存在,一个模态弹出没有动画是一个主要的遗憾。另一个原因是Ng-bootstrap仍处于测试阶段,在与已经发布候选版本的ngx-bootstrap(2017年12月22日)进行比较时,我无法将其用于我的生产应用程序。然而,我希望这两个项目好运,并有望提出可靠的解决方案。

同意@Dilshan的观点。我还决定选择ngx-bootstrap作为我们的新产品。经过一番研究,我发现ngx更成熟,更适合生产。Ng-bootstrap正在开发中。

一个很好的参考资源,CoreUI。io有一个完整的功能CoreUI + Angular 5。X + ngx bootstrap示例项目。我从这个项目中学到了ngx。 您可以浏览它的实时预览或下载项目包

一个不同之处在于它们的日期选择器所使用的格式。Ng-bootstrap使用对象,但ngx-bootstrap将使用更容易使用的字符串。

ng-bootstrap似乎不受支持-顶部请求是appendTo主体,维护者说他没有在这个项目上工作。

我一直在把所有东西都切换到ngx引导

与其说是一个回答,不如说是一个延伸的评论……

我不太确定团队是否独立。运行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>

问题中提到的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 | MIT | deps: 1 | versions: 61 Angular驱动的Bootstrap https://github.com/ng-bootstrap/ng-bootstrap#readme < / p >

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

< >强2022更新: 这两个库都进行了大量的更新和改进。但是从最初的引导程序实现的组件不同。下面是它们之间的关键区别

ngx-bootstrap:

  1. 专用按钮指示
  2. 更好的模态支持(嵌套模态、模态即服务、模态即模板)
  3. 合适的组件(带拖放功能)

< a href = " https://ng-bootstrap.github。Io /" rel="nofollow noreferrer">ng-bootstrap:

  1. 支持引导的OffCanvas特性。
  2. 烤面包特性实现
  3. 在Bootstrap Docs框架列表中突出显示

其他比较工具:


2021年更新:来自v8.0.0 in ng-boostrap动画在默认情况下是打开的,在所有标准的引导组件上可用。


2020年更新:

我用过ngx-bootstrap(通过Valor)和ng-bootstrap(通过ng-boostrap)。以下是我对它们的独特之处的两点看法:

ngx-bootstrap:

  1. 内置动画支持几乎所有的东西(modal, accordion, collapse, dropdown, datepicker…)
  2. 更好的模态支持(嵌套模态、模态即服务、模态即模板)
  3. 可排序组件(带拖放功能)

< a href = " https://ng-bootstrap.github。Io /" rel="nofollow noreferrer">ng-bootstrap:

  1. 导航功能(选项卡已弃用)
  2. 内置Toast组件
  3. 包大小几乎是ngx-bootstrap的一半(Minified + Gzipped)

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

这取决于需要,但遵循经验法则,ng-bootstrap更适合于一般情况下,因为以下原因:

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

如果我没有任何特定的理由使用引导3,那么ng-bootstrap应该是首选。

有关事实和数据的更多细节,请参考以下github回购: