Question

我正在使用Angular 5和Bootstrap4。我已将bootstrap安装为npm模块，并在我的angular-cli脚本和样式部分中对其进行了设置。在这个应用程序中，我基本上只有两条路线。登录路由和表视图路由。

scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "libs/pjd-design-system-core/dist/scripts.min.js"
    ],
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "theme.scss",
    "styles.scss",
    "libs/pjd-design-system-core/css/pjd-icons.css"
  ],

我注意到，当我离开登录路由并转到表视图路由时，引导程序的JS部分不再起作用。我已经通过从bootstrap 4网站获取下拉组件代码并将其粘贴到我的登录组件和表视图组件中进行了测试。在登录名中，下拉列表将打开，但在表视图中则不会打开。

其他相关信息。 Angular版本：5.2.0 Angular-CLi版本：1.7.3

编辑： 我期望发生的事情是，一旦我更改了路由，任何需要javascript的引导程序元素仍将起作用。当前发生的情况是，一旦我更改了路线并加载了新组件（一旦我离开着陆页并转到表格视图页，便会读取），不再需要Javascript功能的所有bootstrap元素（例如下拉菜单）功能（单击该下拉列表将不再打开）。目前，我没有收到任何错误。

随附的路由器模块代码

   import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PayEstimateFormComponent } from './pay-estimate-form/pay-estimate-form.component';
import {SigninComponent} from './auth/signin/signin.component';
import {AuthGuard} from './auth/auth-gaurd.service';

const routes: Routes = [
  {path: '', redirectTo: '/payEstForm', pathMatch: 'full'},
  {path: 'login', component: SigninComponent},
  {path: 'payEstForm', component: PayEstimateFormComponent, canActivate: [AuthGuard]},
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [ RouterModule ],
})
export class AppRoutingModule { }

在Angular 5中更改路由后，Bootstrap JS停止工作

0 个答案: