Angular 17中MatDialog内Scrollspy失效问题及解决方案咨询

我在Angular 17的MatDialog中配置了Bootstrap 5.3的Scrollspy，但activate.bs.scrollspy事件要么不触发，要么仅在window级别触发，滚动时导航栏锚点无法高亮。相关代码如下：

HTML代码 #

<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>
        <div id="item-02">
            <p>...</p>
        </div>
        <div id="item-03">
            <p>...</p>
        </div>
        <div id="item-04">
            <p>...</p>
        </div>
        <div id="item-05">
            <p>...</p>
        </div>
    </div>
</div>

CSS代码 #

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

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

我尝试用@HostListener捕获事件失败，绑定scroll事件到面板但无法定位当前元素，且不想使用jQuery。以下是三个针对性解决方案：

方案1：让Bootstrap Scrollspy在MatDialog内正常工作 #

Bootstrap Scrollspy默认监听window滚动，MatDialog内的滚动是容器级的，需手动初始化并指定监听容器：

1. 在组件类中注入ElementRef，在视图初始化完成后手动初始化Scrollspy：

import { ElementRef, AfterViewInit } from '@angular/core';
import ScrollSpy from 'bootstrap/js/dist/scrollspy';

export class YourDialogComponent implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    const scrollPanel = this.el.nativeElement.querySelector('#scrollspy-panel');
    // 手动初始化Scrollspy，指定滚动容器与目标导航
    const scrollSpy = new ScrollSpy(scrollPanel, {
      target: '#scrollspy-navbar',
      smoothScroll: true
    });

    // 原生监听activate事件
    scrollPanel.addEventListener('activate.bs.scrollspy', (e) => {
      console.log('激活元素:', e.relatedTarget);
      // Bootstrap会自动给激活的nav-link添加active类，无需额外高亮逻辑
    });
  }
}

2. 确保Bootstrap JS已正确引入（可通过angular.json的scripts数组添加，或用ES模块导入）。
3. 修复HTML结构：原始代码中item-0X的div未闭合，这会导致DOM异常，需补充闭合标签。

方案2：手动实现Scrollspy逻辑 #

不依赖Bootstrap，自己实现滚动监听与高亮：

import { ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

export class YourDialogComponent implements AfterViewInit, OnDestroy {
  private scrollPanel: HTMLElement;
  private navLinks: NodeListOf<HTMLAnchorElement>;
  private items: NodeListOf<HTMLElement>;
  private scrollListener: () => void;

  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    this.scrollPanel = this.el.nativeElement.querySelector('#scrollspy-panel');
    this.navLinks = this.el.nativeElement.querySelectorAll('.nav-link');
    this.items = this.el.nativeElement.querySelectorAll('[id^="item-"]');

    // 绑定滚动事件
    this.scrollListener = () => this.handleScroll();
    this.scrollPanel.addEventListener('scroll', this.scrollListener);

    // 初始化时触发一次，设置初始高亮
    this.handleScroll();
  }

  private handleScroll(): void {
    const scrollTop = this.scrollPanel.scrollTop;
    const panelHeight = this.scrollPanel.clientHeight;
    let activeId = '';

    // 遍历内容块，找到当前可视区域内的目标块
    this.items.forEach(item => {
      const itemTop = item.offsetTop;
      const itemHeight = item.offsetHeight;
      // 以容器中间位置为基准判断元素是否进入可视区域
      if (itemTop <= scrollTop + panelHeight / 2 && itemTop + itemHeight > scrollTop) {
        activeId = item.id;
      }
    });

    // 更新导航链接高亮状态
    this.navLinks.forEach(link => {
      link.classList.toggle('active', link.getAttribute('href') === `#${activeId}`);
    });
  }

  ngOnDestroy(): void {
    // 销毁时移除监听，避免内存泄漏
    this.scrollPanel.removeEventListener('scroll', this.scrollListener);
  }
}

无需Bootstrap的data属性，HTML保持原有结构即可，Bootstrap默认的.nav-link.active样式可直接使用。

方案3：无jQuery监听activate.bs.scrollspy事件 #

若仍想用Bootstrap Scrollspy，仅需用原生API绑定事件：

import { ElementRef, AfterViewInit } from '@angular/core';
import ScrollSpy from 'bootstrap/js/dist/scrollspy';

export class YourDialogComponent implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    const scrollPanel = this.el.nativeElement.querySelector('#scrollspy-panel');
    // 初始化Scrollspy到容器上
    new ScrollSpy(scrollPanel, { target: '#scrollspy-navbar' });

    // 原生API监听事件
    scrollPanel.addEventListener('activate.bs.scrollspy', (event) => {
      // event.relatedTarget即为当前激活的nav-link元素
      const activeLink = event.relatedTarget;
      console.log('当前激活链接:', activeLink);
      // 可在此添加自定义逻辑
    });
  }
}

核心是必须将Scrollspy初始化在滚动容器上，而非window，否则事件会绑定到全局，无法在MatDialog内触发。

内容的提问来源于stack exchange，提问作者Lenni