Bootstrap 4下拉菜单在Angular 5中首次需点击两次才能打开问题

嘿，这个问题我太熟了！当初在Angular 5里升级Bootstrap 4的时候也踩过一模一样的坑——首次点击下拉菜单没反应，得点第二次才正常，后续操作又没问题。这大概率是Bootstrap的原生JS依赖jQuery，而Angular有自己的视图更新和变更检测机制，两者初始化不同步导致的。给你几个靠谱的解决办法：

方案一：改用ng-bootstrap（最推荐） #

ng-bootstrap是专门为Angular打造的Bootstrap组件库，完全不需要jQuery，完美适配Angular的生态，从根源上避免这类冲突问题。

步骤： #

1. 安装ng-bootstrap

npm install @ng-bootstrap/ng-bootstrap --save

2. 在你的AppModule中导入NgbModule

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // 其他已导入的模块比如BrowserModule等
    NgbModule
  ]
})
export class AppModule { }

3. 修改你的下拉菜单模板，用ng-bootstrap的指令替代原生Bootstrap的data属性：

<div class="dropdown col-md-2 offset-md-2" ngbDropdown>
  <button type="button" class="btn btn-round btn-info dropdown-toggle float-right" ngbDropdownToggle>
    <i class="material-icons">build</i>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" ngbDropdownMenu>
    <!-- 这里放你的下拉菜单项 -->
    <li class="dropdown-item">
      <a href="#">示例菜单项1</a>
    </li>
    <li class="dropdown-item">
      <a href="#">示例菜单项2</a>
    </li>
  </ul>
</div>

方案二：手动初始化Bootstrap下拉组件（保留原生Bootstrap JS） #

如果你不想替换组件库，想继续用原生Bootstrap的JS，那需要确保在Angular视图完全初始化后，手动触发下拉组件的初始化。

步骤： #

1. 确保已经正确引入jQuery和Bootstrap的JS（可以在angular.json的scripts数组里配置，或者在index.html中通过<script>标签引入）
2. 在你的组件中，利用ngAfterViewInit钩子初始化下拉组件：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
declare var $: any; // 声明jQuery变量，避免TS报错

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('dropdownButton') dropdownButton: ElementRef;

  ngAfterViewInit(): void {
    // 视图初始化完成后，手动初始化下拉组件
    $(this.dropdownButton.nativeElement).dropdown();
  }
}

3. 在模板中给按钮添加模板引用变量：

<div class="dropdown col-md-2 offset-md-2">
  <button #dropdownButton type="button" class="btn btn-round btn-info dropdown-toggle float-right" data-toggle="dropdown">
    <i class="material-icons">build</i>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 你的下拉菜单项 -->
  </ul>
</div>

额外排查点 #

• 检查是否重复引入了jQuery或Bootstrap JS（比如angular.json和index.html都引入了），这会导致事件绑定冲突，也可能引发这类问题。
• 确保你的Bootstrap版本和Angular 5的兼容性（Bootstrap 4和Angular 5是兼容的，但要避免使用太新的Bootstrap子版本）。

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