Angular项目中点击按钮触发Bootstrap modal无法正常显示问题求助

Angular项目使用带路由的侧边栏实现多组件跳转，在4个组件间跳转后，通过以下代码触发模态框时出现无法正常交互的异常：

public onOpenModal(profile: Profile, mode: String) {
    console.log("openModel");
    const container = document.getElementById('main-container-edit');
    const button = document.createElement('button');
    button.type = 'button';
    button.style.display = 'none';
    button.setAttribute('data-toggle', 'modal');
    if (mode === 'edit') {
      this.profile = profile;
      button.setAttribute('data-target', '#editProfileModal');
    }
    if (mode === 'delete') {
      this.deleteProfile = profile;
      button.setAttribute('data-target', '#deleteProfileModal');
    }
    container?.appendChild(button);
    button.click();
}

异常效果：

• 检查DOM节点重复：打开浏览器控制台元素面板，搜索editProfileModal/deleteProfileModal和main-container-edit节点，看是否存在多个重名ID的节点，路由跳转时旧组件没销毁干净会导致data-target匹配到隐藏的旧实例，出现模态框灰屏、无法点击的问题。
• 检查动态创建的按钮残留：现有代码每次打开模态框都会创建新的button元素插入容器，没有销毁逻辑，多次调用后会残留大量无用节点，干扰模态框触发逻辑。
• 检查Bootstrap实例绑定状态：如果使用的是Bootstrap 4/5，模态框第一次初始化后会绑定全局实例，路由跳转后旧实例未销毁，新组件的模态框DOM无法绑定新实例，会导致触发失效。

方案1：修复现有原生实现 #

修改onOpenModal方法，新增临时按钮销毁逻辑和旧模态框实例清理逻辑：

public onOpenModal(profile: Profile, mode: String) {
    console.log("openModel");
    const container = document.getElementById('main-container-edit');
    if(!container) return;
    // 清理之前残留的动态触发按钮
    const oldBtns = container.querySelectorAll('button[data-toggle="modal"]');
    oldBtns.forEach(btn => btn.remove());
    
    const button = document.createElement('button');
    button.type = 'button';
    button.style.display = 'none';
    button.setAttribute('data-toggle', 'modal');
    let targetModalId = '';
    if (mode === 'edit') {
      this.profile = profile;
      targetModalId = '#editProfileModal';
    }
    if (mode === 'delete') {
      this.deleteProfile = profile;
      targetModalId = '#deleteProfileModal';
    }
    button.setAttribute('data-target', targetModalId);
    container.appendChild(button);
    button.click();
    // 用完立即销毁临时按钮
    button.remove();

    // Bootstrap 5环境补充模态框实例重置逻辑
    const modalEl = document.querySelector(targetModalId) as HTMLElement;
    if(modalEl && (window as any).bootstrap) {
      const existInstance = (window as any).bootstrap.Modal.getInstance(modalEl);
      if(existInstance) existInstance.dispose();
      new (window as any).bootstrap.Modal(modalEl).show();
    }
}

给组件新增OnDestroy生命周期钩子，组件销毁时清理残留的模态框资源：

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

export class YourComponent implements OnDestroy {
  // 现有组件逻辑
  ngOnDestroy(): void {
    // 清理模态框遮罩层
    document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
    // 移除body上的模态框专属样式类
    document.body.classList.remove('modal-open');
    // 销毁当前组件关联的模态框实例
    ['#editProfileModal', '#deleteProfileModal'].forEach(id => {
      const modalEl = document.querySelector(id) as HTMLElement;
      if(modalEl && (window as any).bootstrap) {
        const instance = (window as any).bootstrap.Modal.getInstance(modalEl);
        if(instance) instance.dispose();
      }
    })
  }
}

方案2：改用Angular生态模态框方案（推荐） #

放弃原生Bootstrap的data属性触发方式，改用@ng-bootstrap/ng-bootstrap库的模态框服务，完全适配Angular路由和组件生命周期，不会出现DOM冲突问题：

• 安装依赖：npm install @ng-bootstrap/ng-bootstrap
• 在组件中注入NgbModal服务直接调用模态框，无需手动操作DOM，实例会自动跟随组件生命周期销毁。

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