时间戳

首页 > 解决方案 > 当我切换到另一个页面时，bootstrap-select 消失

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

问题描述

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

当我启动应用程序时

在我切换页面并返回同一页面后

我的 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 select

感谢您的时间

标签： angularnpmangular-clibootstrap-select

解决方案

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

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

npm install --save-dev @types/jquery

其次将以下行添加到 tslint.json 文件中：

"allowSyntheticDefaultImports": true

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

declare var $: any;

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

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

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

我希望这对其他人有帮助

推荐阅读