NgbDropdown 不断刷新类 \'dropdown\' 和 \'open\'答案

【问题标题】：NgbDropdown keep refreshing class 'dropdown' and 'open'NgbDropdown 不断刷新类 \'dropdown\' 和 \'open\'
【发布时间】：2022-08-11 21:39:07
【问题描述】：

我在我的 Angular 12 应用程序中使用 @ng-bootstrap/ng-bootstrap，并且我使用 NgbDropdown 来显示一些下拉菜单。当下拉菜单打开时，分类总是刷新，这使得下拉菜单变慢并且性能不佳。

查看一直被监视的元素，直到我关闭下拉菜单。有没有办法让这个下拉菜单的性能更好？还是我应该替换下拉库？

标签： angular dropdown ng-bootstrap

【解决方案1】：

我遇到了同样的问题，让我走上正确道路的是 ng-bootstrap 家伙的this 回答：

确实，向外定位是一项广泛的任务，但不应该触发这么多的变化检测周期，这对于 Angular 应用程序来说是一个更普遍的关注点。

这意味着问题的一个好的解决方案（无论您是否使用下拉菜单都会改进应用程序）是首先找出导致如此多的更改检测周期的原因。

为此，我将以下代码添加到包含下拉列表的页面中的一个组件中：
ngInInit() {
    this.ngZone.onStable.subscribe(() => {
        console.log('on stable was called');
    });
}
然后您实际上可以在控制台中看到更改检测周期过多，但更重要的是，您可以在此处设置断点，并查看调用堆栈以找出启动这些周期的原因。在我的例子中，它是我们使用的 resize-observer 的第 3 方，切换到本机 ResizeObserver（或 polyfill）解决了这个问题。

【讨论】：