Angular 项目升级后,ng-bootstrap 的pagination 组件显示多余的 “(current)”

最近有个项目从 Angular 11 升级到了 Angular 13 (升级过程可以参考这篇文章),其他部分都显示良好,不过在很多数据列表页面出现了页码显示的问题,翻页器 pagination 的当前页码后面跟着个扎眼的 “(current)”,如下图:

通过查看代码,对比 bootstrap 和 ng-bootstrap 源代码,发现原来是版本对应兼容的问题。

项目升级后, bootstrap 版本升为了 4.6.2,而 ng-bootstrap 升为了 12.0.0。而根据 ng-bootstrap 官方文档,版本的对应关系应该是如下:

因此通过将 ng-bootstrap 降级到 11.0.1 问题得到解决。

这个问题的根本原因,在于 bootstrap 新版本中去除了一段代码,见这个 issue:

https://github.com/ng-bootstrap/ng-bootstrap/issues/3870

新版本 ngb 也跟着去掉了包含 (current) 的这段代码,但若依赖项是老版本 bootstrap,里面还有这段代码,那就显示出来了。