在 Angular 中手动创建滚动间谍

Question

我已经在

MatDialog

中设置了滚动间谍，并且事件

activate.bs.scrollspy

似乎没有触发，或者可能确实触发了，但可能在窗口级别，并且它没有突出显示我的导航栏上的锚点，当我向下滚动时。我正在使用 Angular 17 和 bootstrap 5.3。

<div id="scrollContainer" class="row">
    <nav id="scrollspy-navbar" class="col-4 navbar-light flex-column align-items-stretch pe-4 border-end overflow-auto">
        <nav class="nav nav-pills flex-column">
            <a class="nav-link" href="#item-01">{{heading01}}</a>
            <a class="nav-link" href="#item-02">{{heading02}}</a>
            <a class="nav-link" href="#item-03">{{heading03}}</a>
            <a class="nav-link" href="#item-04">{{heading04}}</a>
            <a class="nav-link" href="#item-05">{{heading05}}</a>
        </nav>
    </nav>

    <div id="scrollspy-panel" 
         class="col-8 px-3" 
         data-bs-spy="scroll" 
         data-bs-target="#scrollspy-navbar" 
         data-bs-smooth-scroll="true" 
         tabindex="0">
        <div id="item-01">
            <p>...</p>
        <div id="item-02">
            <p>...</p>
        <div id="item-03">
            <p>...</p>
        <div id="item-04">
            <p>...</p>
        <div id="item-05">
            <p>...</p>

我的CSS

#scrollspy-navbar {
    height: 60vh;
    overflow-y: scroll;
}

#scrollspy-panel {
    height: 60vh;
    overflow-y: scroll;
}

我尝试在不使用jquery的情况下听

activate.bs.scrollspy

，因为在最新版本的Angular中这被认为是不好的做法。我尝试使用

@HostListener

但我认为我无法用它来捕捉

activate.bs.scrollspy

。

我也尝试过

    <div id="scrollspy-panel" 
         class="col-8 px-3" 
         data-bs-spy="scroll" 
         data-bs-target="#scrollspy-navbar" 
         data-bs-smooth-scroll="true" 
         tabindex="0" 
         (scroll)="onPanelScroll($event)">

然后

  onPanelScroll (e:any):void {
    console.log(e.currentTarget);
  }

但它会记录整个

<div id="scrollspy-panel">

本身，而不是显示的特定

<div id="item-0X">

项目。

我在 bootstrap 5.3 中读到，我应该在

e.relatedTarget

上捕获

activate.bs.scrollspy

，但我不知道如何在不使用 jquery 的情况下做到这一点。

有什么办法吗

• 使滚动间谍在对话框内工作，
• 或者从头开始手动设置scrollspy，
• 或者不使用jquery来听

  activate.bs.scrollspy

  ？

如果有人可以通过这些方式或任何其他有用的建议帮助我，或者以友好的方式回应而不引起冒犯，我将不胜感激。

Answer 1

在组件中，使用 JavaScript 实例化滚动间谍，因为数据属性似乎不适用于动态添加的内容。

试试这个（删除数据属性）：

  ngAfterViewInit() {
    const scrollSpy = new bootstrap.ScrollSpy(document.querySelector('#scrollspy-panel'), {
      target: '#scrollspy-navbar'
    });
  }