Angular 15移动端多级菜单滚动异常问题求助

我正在开发Angular 15项目，从数据库拉取菜单、分类、类型及子类型数据。菜单在桌面端显示正常，移动端滚动主菜单也能正常运行，但滚动分类查看类型时会出现错误。使用静态数据配置菜单则无此问题。

相关代码 #

HTML模板：

<ul class="navbar-nav">
  <li class="dropdown" *ngFor="let menu of menus" >
      <a data-bs-toggle="dropdown" class="nav-link dropdown-toggle{{ menu.id === 1 ?' active':''}}" href="#">{{menu.name}}</a>
      <div class="dropdown-menu">
          <ul>
            <li *ngFor="let category of menu.categories">
              <a class="dropdown-item menu-link dropdown-toggler" href="#">{{category.name}}</a>
              <div class="dropdown-menu">
                  <ul  *ngFor="let type of category.types">
                      <li><a style="cursor: pointer;" class="dropdown-item nav-link{{ type.sub_types.length > 0 ? ' dropdown-toggler' : '' }}"  (click)="onMenuClick(menu,category,type)">{{type.name}}</a>
                        <div class="dropdown-menu">
                          <ul *ngFor="let subtype of type.sub_types">
                            <li>
                              <a style="cursor: pointer;" class="dropdown-item nav-link nav_item"   (click)="onMenuClick1(menu,category,type,subtype)">{{subtype.name}}</a>
                              </li>
                          </ul>
                      </div>
                      </li>
                  </ul>
              </div>
          </li>
          </ul>
      </div>
  </li>

  <li >
    <a class="dropdown-item nav-link" href="#" data-bs-toggle="dropdown">A Propos</a>
  </li>
</ul>

TypeScript逻辑：

onMenuClick(menu:Menu,category:Category,type:Type) {
    const MenuSlug = menu.slug;
    const categorieslug = category.slug;
    const slug = type.slug;
    this.router.navigate([`/${MenuSlug}`], { queryParams: { "category": categorieslug, "types": slug} });
}
onMenuClick1(menu:Menu,category:Category,type:Type,subtype:SubType) {
    const MenuSlug = menu.slug;
    const categorieslug = category.slug;
    const slug = type.slug;
    const subtypeSlug = subtype.slug
    this.router.navigate([`/${MenuSlug}`], { queryParams: { "category": categorieslug, "types": slug ,"subtype":subtypeSlug} });
}

排查与解决方向 #

• 确保数据加载完成后渲染：在最外层<ul class="navbar-nav">添加*ngIf="menus"，避免数据未返回时渲染空结构引发DOM异常。
• 重新初始化Bootstrap下拉组件：动态生成的DOM元素可能未被Bootstrap正确识别，在数据获取完成后（比如subscribe回调末尾）执行：

  import * as bootstrap from 'bootstrap';
  // 数据加载完成后调用
  document.querySelectorAll('.dropdown-toggle').forEach(el => new bootstrap.Dropdown(el));
  

• 检查数据结构一致性：对比静态数据和数据库返回数据的结构，确保menus.categories、category.types、type.sub_types都是已初始化的数组，没有undefined或null的属性（比如slug为空），这会导致点击事件或路由跳转报错。
• 替换为Angular适配的下拉组件：原生Bootstrap下拉和Angular的变更检测可能存在冲突，尝试使用Angular Bootstrap（ng-bootstrap）的下拉组件，它更适配Angular的动态渲染和生命周期。

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