Bootstrap原生jQuery版不推荐用于现代Angular项目，应优先选用ng-bootstrap；因其完全基于Angular重写，无jQuery依赖，通过@Input/@Output与Angular生态原生兼容，避免DOM冲突、内存泄漏及变更检测失效等问题。
直接说结论：Bootstrap 框架本身（原生 jQuery 版）**不推荐在现代 Angular 项目中直接集成**；应优先选用 ng-bootstrap 或 @ng-bootstrap/ng-bootstrap —— 它是官方维护、无 jQuery 依赖、完全基于 Angular 组件的实现。
为什么不能直接用 Bootstrap CSS + JS 在 Angular 里？
原生 Bootstrap 的 JavaScript 插件（如 modal、dropdown、tooltip）严重依赖 jQuery 和 DOM 直接操作，而 Angular 的变更检测、组件生命周期、视图封装机制与之天然冲突。常见表现包括：
- 模态框打开后无法响应
ngModel双向绑定，输入内容不更新component.ts中的变量 - 动态渲染的
dropdown在*ngFor列表中反复初始化失败，控制台报Cannot read property 'top' of undefined - 调用
$('[data-toggle="tooltip"]').tooltip()后，tooltip 内容无法响应{{item.name}}插值表达式 - 路由跳转后，之前初始化的 Bootstrap JS 实例未销毁，导致内存泄漏和重复绑定
ng-bootstrap 是什么，它解决了哪些关键问题？
ng-bootstrap 不是 Bootstrap CSS 的包装器，而是用纯 Angular 重写的 UI 组件库，只依赖 Bootstrap CSS（不带 JS），所有交互逻辑由 Angular 指令/服务驱动。
- 所有组件（
NgbModal、NgbDropdown、NgbTooltip）都通过@Input()/@Output()暴露 API，与FormControl、ReactiveFormsModule原生兼容 - 无需手动调用
.modal('show')，改用const ref = this.modalService.open(MyComponent)，返回 Observable 控制流 - Tooltip 内容支持模板：
<div ngbTooltip="Static text">hover me</div>或<div [ngbTooltip]="dynamicContent">...</div> - 样式完全复用 Bootstrap 5 的 CSS 变量（如
--bs-primary），升级 Bootstrap CSS 版本时 UI 自动同步，无需改组件代码
如果非要保留 bootstrap-switch 这类第三方插件怎么办？
像 bootstrap-switch 这类非官方、jQuery 驱动的插件，在 Angular 中属于“高危集成”，仅建议用于遗留系统迁移过渡期，且必须做严格封装隔离。
- 不要在
ngAfterViewInit里直接调用$('input[type=checkbox]').bootstrapSwitch()—— 它会绕过 Angular 的变更检测，且破坏 OnPush 策略 - 必须用
Renderer2创建 wrapper 元素，并在ngOnDestroy中显式调用destroy()方法释放事件监听器 - 状态同步只能靠
EventEmitter主动派发：this.change.emit($element.bootstrapSwitch('state'))，不能依赖[(ngModel)] - 注意 Angular 的 ViewEncapsulation：若设为
Emulated（默认），bootstrap-switch注入的内联 style 可能被 scoped 属性选择器拦截，需用::ng-deep（已弃用）或全局styles.scss覆盖
真正难处理的从来不是“怎么让开关动起来”，而是“怎么让它在异步加载、条件渲染、路由复用、AOT 编译下依然稳定同步状态”——这些细节，ng-bootstrap 已经帮你压平了；自己硬接 jQuery 插件，等于主动退回 Angular 1.x 时代的手动 DOM 管理模式。
