如何在Angular CLI中正确安装Bootstrap 4以确保所有组件正常工作？

嘿，我一眼就看出问题所在啦！你用的是jQuery Slim版本，这正是popover和tooltips失效的关键原因。

为什么会这样？ #

Bootstrap 4的Tooltip和Popover组件依赖jQuery的完整功能，而jQuery Slim版本移除了一些核心模块（比如部分事件处理、DOM操作的细节），这些模块正好是Bootstrap这些交互组件所必需的。虽然Slim版体积更小，但代价就是没法支持Bootstrap的这些动态交互组件。

一步步解决方法： #

1. 替换为完整版本的jQuery
   先卸载当前的slim版jQuery，然后安装完整版本：

   npm uninstall jquery
   npm install jquery --save
   

2. 更新Angular CLI配置文件中的脚本路径
   打开你的angular-cli.json（如果是Angular 6及以上版本，文件名为angular.json），把jQuery的脚本路径从slim版本改成完整版本：

   "scripts": [
     "../node_modules/jquery/dist/jquery.min.js", // 替换成这个
     "../node_modules/popper.js/dist/umd/popper.min.js",
     "../node_modules/bootstrap/dist/js/bootstrap.min.js"
   ]
   

   注意：如果是angular.json，路径不需要../，直接写node_modules/jquery/dist/jquery.min.js即可

3. 手动初始化Tooltip和Popover
   Angular的DOM渲染机制和原生页面不同，仅仅靠Bootstrap的data-toggle属性可能没法自动初始化这些组件，尤其是当组件是动态生成的时候。你需要在组件的ngAfterViewInit钩子中手动初始化：

   import { Component, AfterViewInit } from '@angular/core';
   // 声明jQuery变量，避免TypeScript报错
   declare var $: any;
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponentComponent implements AfterViewInit {
   
     ngAfterViewInit(): void {
       // 初始化所有带data-toggle="tooltip"的元素
       $('[data-toggle="tooltip"]').tooltip();
       // 初始化所有带data-toggle="popover"的元素
       $('[data-toggle="popover"]').popover();
     }
   }
   

   如果想全局初始化，可以把这段代码放到app.component.ts里，这样整个应用的tooltip和popover都会生效。

验证一下 #

重启你的Angular开发服务器（ng serve），然后测试tooltip和popover，应该就能正常工作啦！

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