Question

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

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除外

谢谢您的时间

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消失了

1 个答案: