Angular集成jQuery/Bootstrap后点击事件需双击才能生效问题

核心是两个配置和逻辑错误导致点击事件冲突、绑定失效：

1. Bootstrap脚本重复引入：angular.json的scripts配置中同时引入了bootstrap.min.js和bootstrap.bundle.min.js。后者已经内置了Popper.js和所有Bootstrap组件的交互逻辑，重复引入会导致下拉组件的点击事件被注册两次，第一次点击触发时两个实例的逻辑互相冲突（一个添加展开类、一个移除展开类），视觉上表现为点击无响应。
2. jQuery事件绑定时机错误：自定义的app.js在DOMContentLoaded事件触发时就绑定子菜单点击事件，但Angular作为单页框架，DOMContentLoaded触发时根组件还未完成渲染，页面上不存在.dropdown-submenu、.dropdown-toggle等目标DOM元素，jQuery选择器无法选中元素，事件根本没有绑定成功。第一次点击仅触发Bootstrap原生逻辑展开父级菜单，第二次点击时元素才完成状态同步，表现为需要双击才能响应。

按以下步骤调整即可恢复单击正常响应：

1. 清理重复的脚本引入
   修改angular.json的scripts配置，删除重复的bootstrap.min.js引入，仅保留bundle版本：

   "scripts": [
     "node_modules/jquery/dist/jquery.min.js",
     "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
     "src/assets/js/app.js"
   ]
   

2. 调整jQuery逻辑初始化时机
   移除app.js中原有的DOMContentLoaded、window.load事件监听里的初始化调用，改为在Angular组件视图渲染完成后再执行初始化，保证绑定事件时目标DOM已经存在：
   • 在src/typings.d.ts（不存在则新建）中声明全局变量，避免TS编译报错：

     declare var App: any;
     

   • 修改根组件app.component.ts，在ngAfterViewInit生命周期中执行初始化：

     import { Component, AfterViewInit } from '@angular/core';
     
     @Component({
       selector: 'app-root',
       templateUrl: './app.component.html'
     })
     export class AppComponent implements AfterViewInit {
       ngAfterViewInit(): void {
         App.initCore();
       }
     }
     

3. 优化事件绑定逻辑适配动态DOM
   把原来直接绑定到元素的点击事件改为委托到document的事件委托模式，兼容Angular动态渲染的DOM（比如路由切换、*ngIf控制显隐的元素），不需要重复绑定事件。修改app.js中的_dropdownSubmenu方法：

   var _dropdownSubmenu = function() {
     // 事件委托绑定，适配动态渲染的菜单元素
     $(document).on('click', '.dropdown-menu .dropdown-submenu:not(.disabled) .dropdown-toggle', function(e) {
       e.stopPropagation();
       e.preventDefault();
   
       // 收起同级其他展开的子菜单
       $(this).parent().siblings().removeClass('show').find('.show').removeClass('show');
   
       // 切换当前子菜单展开状态
       $(this).parent().toggleClass('show').children('.dropdown-menu').toggleClass('show');
   
       // 父级下拉关闭时自动收起所有子菜单
       $(this).parents('.dropdown').one('hidden.bs.dropdown', function() {
         $('.dropdown-submenu.show, .dropdown-submenu .show').removeClass('show');
       });
     });
   };
   

   注意这里把父菜单关闭事件的on绑定改成了one，避免重复绑定触发多次逻辑。

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