如何在Angular 4及以上项目中导入Bootstrap 4主题并修复功能异常

我来帮你排查下这个问题，Angular里引入第三方JS脚本确实容易遇到加载时机或作用域的问题，咱们一步步来解决：

1. 先确认脚本是否成功加载 #

首先打开浏览器开发者工具（F12）切换到Network标签，刷新页面后搜索new-age.js：

• 如果看不到该文件，或者状态码不是200：检查angular.json里的路径是否和实际文件位置一致（比如src/assets/js/new-age.js是否真的存在），注意文件名和路径的大小写（Angular在部分环境下对大小写敏感）。
• 如果已成功加载，那问题大概率出在脚本执行时机或DOM匹配上。

2. 调整脚本执行时机（核心解决方法） #

New-Age模板的JS逻辑通常依赖DOM加载完成，但Angular组件渲染是异步的——直接在angular.json里引入脚本时，可能脚本执行时app.component.html的DOM还没渲染好，导致事件绑定失效。推荐两种解决方式：

方式一：在组件生命周期钩子中手动初始化功能 #

先确保jQuery全局可用：

1. 安装jQuery类型定义：npm install @types/jquery --save-dev
2. 在src/typings.d.ts（没有就新建）中添加：declare var $: any;

然后在app.component.ts中，利用ngAfterViewInit钩子（DOM渲染完成后触发）初始化功能：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 复制new-age.js里的核心逻辑到这里，比如平滑滚动、导航激活等
    // 平滑滚动逻辑
    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
        const target = $(this.hash);
        const scrollTarget = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (scrollTarget.length) {
          $('html, body').animate({
            scrollTop: (scrollTarget.offset().top - 56)
          }, 1000, "easeInOutExpo");
          return false;
        }
      }
    });

    // 点击导航项关闭折叠菜单
    $('.js-scroll-trigger').click(function() {
      $('.navbar-collapse').collapse('hide');
    });

    // 滚动时激活对应导航项
    $(window).scroll(function() {
      const scrollDistance = $(window).scrollTop();
      $('.page-section').each(function(i) {
        if ($(this).position().top <= scrollDistance + 100) {
          $('.navbar-nav .nav-item .nav-link').removeClass('active');
          $('.navbar-nav .nav-item .nav-link').eq(i).addClass('active');
        }
      });
    }).scroll();
  }
}

方式二：动态加载脚本确保DOM就绪 #

如果不想复制代码，可以在ngAfterViewInit里动态插入脚本，确保DOM渲染完成后再加载：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const script = document.createElement('script');
    script.src = 'assets/js/new-age.js';
    script.type = 'text/javascript';
    // 可选：脚本加载完成后执行回调
    script.onload = () => {
      console.log('new-age.js加载完成');
    };
    document.body.appendChild(script);
  }
}

3. 检查HTML结构与类名 #

确保app.component.html里的元素和New-Age模板的结构、类名完全一致：

• 平滑滚动的链接必须带js-scroll-trigger类：<a class="nav-link js-scroll-trigger" href="#about">About</a>
• 页面区块必须带page-section类：<section class="page-section" id="about">...</section>
• 导航菜单的结构要和模板匹配，否则脚本无法找到目标元素。

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