Angular 6项目中Bootstrap Multiselect组件无法正常生效问题求助

问题根因 #

1. 初始化时机错误：你写在index.html里的$(document).ready()执行时，Angular组件的DOM还没完成渲染，找不到<select>元素，导致组件初始化失效
2. jQuery版本冲突：页面先后加载了jQuery 3.3.1和jQuery 2.2.4两个版本，实例覆盖导致依赖jQuery的插件运行异常
3. 资源加载拦截：你使用http协议加载第三方静态资源，若你的站点是https协议，会触发浏览器的混合内容拦截，导致组件样式、脚本加载失败
4. Bootstrap版本冲突：angular.json和index.html分别加载了不同版本的Bootstrap脚本，也可能导致样式和功能异常

修复步骤 #

1. 清理index.html冗余代码
   删掉index.html中如下冗余内容：

   • 重复加载的jQuery 2.2.4脚本
   • 重复加载的bootstrap.bundle脚本
   • 原有写在index.html里的$(document).ready()初始化逻辑
   • 把所有bootstrap-multiselect相关的资源链接协议从http改成https，避免加载拦截

2. 将初始化逻辑移到Angular组件生命周期中
   在app.component.ts中实现AfterViewInit生命周期钩子，等组件视图完全渲染后再初始化组件，示例代码如下：

   import { Component, AfterViewInit } from '@angular/core';
   // 声明全局jQuery变量，避免TypeScript编译报错
   declare var $: any;
   
   @Component({
     selector: 'my-app',
     templateUrl: './app.component.html'
   })
   export class AppComponent implements AfterViewInit {
     ngAfterViewInit() {
       $('#example-getting-started').multiselect({
         includeSelectAllOption: false,
         enableFiltering: true,
         includeFilterClearBtn: false,
         enableCaseInsensitiveFiltering : true,
       });
     }
   }
   

3. 统一Bootstrap版本
   确认angular.json里引入的Bootstrap版本和bootstrap-multiselect依赖的Bootstrap版本一致，避免样式冲突。

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