boottrap-select исчезает, когда я переключаюсь на другую страницу - PullRequest
Новая
       23

boottrap-select исчезает, когда я переключаюсь на другую страницу

0 голосов
/ 12 октября 2018

Я пытаюсь добавить 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выберите

Спасибо за ваше время

1 Ответ

0 голосов
/ 13 октября 2018

Посмотрев вокруг, я нашел решение этой проблемы:

Сначала нужно добавить пакет типов для jQuery с помощью следующей команды 

npm install --save-dev @types/jquery

Во-вторых, добавить следующую строку в tslintФайл .json: 

"allowSyntheticDefaultImports": true

В-третьих, добавьте эту декларацию в файл .ts, где вы используете select, он должен быть сразу после импорта: 

declare var $: any;

Четвертый агрегат AfterViewInit и добавьте следующий код: 

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

Для этой работы вы, должно быть, уже правильно установили bootstrap 4, jQuery, popper и bootstrap-select

Надеюсь, это поможет кому-то еще

...