我正在开发一个Angular应用程序，并使用Bootstrap 5.2。我正在使用卡片上的崩溃组件，它使用数据属性完美地工作。
然而，我想在滚动事件上触发折叠，目前我将卡片固定在屏幕顶部，当用户开始滚动时，我希望卡片的主体折叠。我能够通过使用Typescript实例化元素上的折叠来实现这一点，并使用Typescript删除数据属性并在单击时切换折叠。
然而，这种解决方案施加了不必要的副作用，如离线项目仍然有一个褪色的背景，当点击离开和下拉元素不弹出点击时。
这就是我如何在卡片主体上实例化Collapse
ngAfterViewInit(): void {
this.target = document.getElementById('targetID');
this.collapse = new Collapse(this.target, { toggle: false });
}
我在这里检测srcoll的变化，如果用户向下滚动了50px，那么它会触发折叠隐藏，否则它必须显示。
ngOnChanges(changes: SimpleChanges): void {
if (changes.scrollEvent && changes.scrollEvent.currentValue !== changes.scrollEvent.previousValue) {
this.show = this.scrollEvent.target.scrollTop <= 50;
if (this.collapse) {
if (this.show) {
this.collapse.show();
} else {
this.collapse.hide();
}
}
}
}
这是我要折叠的HTML元素，它应该在默认情况下显示。
<div class="collapse show" id="targetID">
<div class="card-body rounded bg-white p-1">
...content...
</div>
</div>
是否有一些我做错了，导致其他引导元素工作不正确?或者是否有一种方法可以在滚动事件上切换具有数据属性的折叠元素?
我已经找到了一个解决我的问题的方法，似乎我正在研究的项目已经在angular.json和styles.scss中导入了bootstrap。这导致了与popper的冲突问题，现在只通过在styles.scss