Angular路由跳转后Bootstrap模板JQuery失效问题求助

购买了一套Bootstrap模板，放置在src/template目录下，已在angular.json中完成样式和脚本配置。登录后通过this.router.navigate(['/staff/dashboard'])跳转页面时，模板按钮无法正常工作（JQuery相关功能失效）；但直接刷新/staff/dashboard URL时，所有功能均正常。需给出正确配置方案，确保登录跳转后所有资源正常加载。

当前angular.json配置 #

"styles": [
  "src/styles.css",
  "src/assets/template/rocker/assets/css/pace.min.css",
  "src/assets/template/rocker/assets/plugins/simplebar/css/simplebar.css",
  "src/assets/template/rocker/assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css",
  "src/assets/template/rocker/assets/plugins/metismenu/css/metisMenu.min.css",
  "src/assets/template/rocker/assets/css/pace.min.css",
  "src/assets/template/rocker/assets/css/bootstrap.min.css",
  "src/assets/template/rocker/assets/css/bootstrap-extended.css",
  "src/assets/template/rocker/assets/css/app.css",
  "src/assets/template/rocker/assets/css/icons.css",
  "src/assets/template/rocker/assets/css/semi-dark.css",
  "src/assets/template/rocker/assets/css/header-colors.css"
],
"scripts": [
  "src/assets/template/rocker/assets/js/bootstrap.bundle.min.js",
  "src/assets/template/rocker/assets/js/jquery.min.js",
  "src/assets/template/rocker/assets/plugins/simplebar/js/simplebar.min.js",
  "src/assets/template/rocker/assets/plugins/metismenu/js/metisMenu.min.js",
  "src/assets/template/rocker/assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js",
  "src/assets/template/rocker/assets/plugins/chartjs/js/chart.js",
  "src/assets/template/rocker/assets/js/app.js",
  "src/assets/template/rocker/assets/js/pace.min.js"
]

登录服务代码 #

doLogin():void {
  if(this.loginForm.valid){
    this.loginForm.disable();
    this.loginService.doUserLogin(this.loginForm.controls['emailUn'].value, this.loginForm.controls['pw'].value).subscribe({
        next: (res) => {
          if(res){
            this.error = false;
            this.router.navigate(['/staff/dashboard'])
          }
          this.error = true;
        },
        error: () => {
          this.error = true;
          this.loginForm.enable();
          this.doReset();
        },
    });
    this.error = false;
  } else {
    this.doReset();
    this.error = true;
  }
}

1. 修正脚本加载顺序 #

JQuery是所有依赖它的插件（如Bootstrap、metismenu等）的基础，必须最先加载。修改angular.json的scripts数组顺序，将JQuery放在最顶部：

"scripts": [
  "src/assets/template/rocker/assets/js/jquery.min.js",
  "src/assets/template/rocker/assets/js/bootstrap.bundle.min.js",
  "src/assets/template/rocker/assets/plugins/simplebar/js/simplebar.min.js",
  "src/assets/template/rocker/assets/plugins/metismenu/js/metisMenu.min.js",
  "src/assets/template/rocker/assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js",
  "src/assets/template/rocker/assets/plugins/chartjs/js/chart.js",
  "src/assets/template/rocker/assets/js/app.js",
  "src/assets/template/rocker/assets/js/pace.min.js"
]

2. 在Dashboard组件中重新初始化模板插件 #

Angular路由跳转属于SPA内部导航，不会重新加载整个页面，因此模板的JQuery初始化代码（通常在app.js中）只会在页面首次加载时执行，跳转后新渲染的DOM不会被初始化。需在Dashboard组件的ngAfterViewInit钩子中手动触发初始化：

import { Component, AfterViewInit } from '@angular/core';

declare var $: any; // 声明JQuery全局变量
declare var metisMenu: any; // 声明模板用到的插件全局变量

@Component({
  selector: 'app-staff-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 重新初始化metisMenu
    $('#side-menu').metisMenu();
    // 重新初始化perfect-scrollbar
    $('.perfect-scrollbar').perfectScrollbar();
    // 如果模板的app.js中有全局初始化函数，比如init()，也可以直接调用
    // init(); 
  }

}

3. 可选：替换为Angular原生/封装组件（长期方案） #

JQuery的DOM操作和Angular的数据驱动DOM模式存在冲突，长期来看建议替换为Angular封装的同类组件，例如：

• 用ngx-metismenu替代原生metisMenu
• 用Angular Material的滚动组件替代perfect-scrollbar
• 用Angular Bootstrap组件替代原生Bootstrap的JQuery依赖组件

这样可以彻底避免SPA导航中的JQuery初始化问题，同时更符合Angular的开发规范。

内容的提问来源于stack exchange，提问作者Hendra