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
Спасибо за уделенное время
Ответы 1
Осмотревшись, я нашел решение этой проблемы:
Сначала необходимо добавить пакет типов для 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.
Надеюсь, это поможет кому-то другому