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

Question

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

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 select[=17 除外=]

感谢您的宝贵时间

Answer 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

我希望这对其他人有帮助

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

bootstrap-select disappears when I switch to another page

npm

bootstrap-select

angular-cli

angular