当我切换到另一个页面时，bootstrap-select 消失答案

【问题标题】：bootstrap-select disappears when I switch to another page当我切换到另一个页面时，bootstrap-select 消失
【发布时间】：2019-03-17 07:22:56
【问题描述】：

我正在尝试将 bootstrap-select 添加到我的一个项目中，当应用程序加载并且手动点击 URL 时它显示正常，但是当我使用路由切换到另一个页面时，选择消失了。

When I start the application

After I switch the page and return to the same page

我的 app.module.ts 是这样的：

@NgModule({

declarations: [
    AppComponent,
    HeaderComponent,
    SearchComponent,
    VehiclesComponent,
    VehicleDetailComponent,
    VehicleEditComponent,
    VehicleListComponent,
    VehicleItemComponent,
    AuthComponent,
    SigninComponent,
    SignupComponent,
    MiniSearchComponent,
    AdvancedSearchComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular.json 文件

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap-select/dist/css/bootstrap-select.min.css",            
          "src/styles.css"
          ],
 "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",
          "node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"
           ]

我正在使用<router-outlet> 更改页面，所有其他组件和控件都可以正常加载，但 bootstrap-select 选择除外

感谢您的宝贵时间

【问题讨论】：

标签： angular npm angular-cli bootstrap-select

【解决方案1】：

环顾四周，我找到了解决这个问题的方法：

首先需要使用以下命令为jQuery添加类型包

npm install --save-dev @types/jquery

第二次在 tslint.json 文件中添加以下行：

"allowSyntheticDefaultImports": true

第三次将此声明添加到您使用 select 的 .ts 文件中，它必须在导入之后：

declare var $: any;

第四次实现AfterViewInit并添加以下代码：

ngAfterViewInit(): void {
    $('.selectpicker').selectpicker();
}

对于这项工作，您必须已经正确安装了 bootstrap 4、jQuery、popper 和 bootstrap-select

我希望这对其他人有帮助

【讨论】：