时间戳

首页 > 解决方案 > Angular TS 导入的脚本文件不起作用

javascript - Angular TS 导入的脚本文件不起作用

问题描述

我正在尝试通过做和阅读来学习 Angular Typescript。

我正在尝试将现成的 HTML 引导主题集成到 Angular 项目中。

整合是成功的。但我觉得在架构方面这是错误的。

我的 Angular.json 文件的样式和脚本标签是 ->

"assets": [
      "src/favicon.ico",
      "src/assets"
          ],
"styles": [
              "src/assets/css/styles.css",
              "src/styles.scss"
            ],
"scripts": [
            ]

index.html 文件的主体标签 ->

<body id="page-top">
      <app-root></app-root>

      <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      ... </nav>
      
      <header class="masthead">
      ...
      </header>

      <section class="page-section" id="services">
      ...
      </section>

      <section class="page-section" id="about">
      ...
      </section>

      ........ some more sections .........
    
      <script src="assets/js/jquery.min.js"></script>
      <script src="assets/js/bootstrap.bundle.min.js"></script>
      <script src="assets/js/jquery.easing.min.js"></script>
      <script src="assets/js/scripts.js"></script>
    </body>

为了使主题正常工作，我必须将所有脚本和 Html 内容添加到一个文件中。作为本例，它是 index.html。我必须在 body 标记的末尾导入脚本文件。我将 CSS 文件添加到 Angular.json，它们运行良好。

我觉得这是不对的。我应该将 Html 分成组件，并且我应该保持 index.html 干净。我必须从 angular.json 导入 js 文件。

一旦我这样做，这个错误就会在控制台中弹出->

在此处输入图像描述

现在我的 Angular.json 样式和脚本标签是 ->

    "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
    "styles": [
          "src/assets/css/styles.css",
          "src/styles.scss"
        ],
    "scripts": [
          "src/assets/js/jquery.min.js",
          "src/assets/js/bootstrap.bundle.min.js",
          "src/assets/js/jquery.easing.min.js"
          "src/assets/js/scripts.js"
        ]

index.html 正文标签 ->

<body id="page-top">
  <app-root></app-root>
</body>

我将所有 HTML 移动到一个组件并更新路由

const routes: Routes = [
  { path: "", component: LandingPageComponent }
];

我认为错误是因为没有正确加载脚本文件。

jquery.easing.min.js 也不起作用（这个文件负责平滑滚动动画）。

这是 scripts.js 文件

    (function ($) {
    "use strict"; // Start of use strict

    // Smooth scrolling using jQuery easing
    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
        if (
            location.pathname.replace(/^\//, "") ==
                this.pathname.replace(/^\//, "") &&
            location.hostname == this.hostname
        ) {
            var target = $(this.hash);
            target = target.length
                ? target
                : $("[name=" + this.hash.slice(1) + "]");
            if (target.length) {
                $("html, body").animate(
                    {
                        scrollTop: target.offset().top - 72,
                    },
                    1000,
                    "easeInOutExpo"
                );
                return false;
            }
        }
    });

    // Closes responsive menu when a scroll trigger link is clicked
    $(".js-scroll-trigger").click(function () {
        $(".navbar-collapse").collapse("hide");
    });

    // Activate scrollspy to add active class to navbar items on scroll
    $("body").scrollspy({
        target: "#mainNav",
        offset: 74,
    });

    // Collapse Navbar
    var navbarCollapse = function () {
        if ($("#mainNav").offset().top > 100) {
            $("#mainNav").addClass("navbar-shrink");
        } else {
            $("#mainNav").removeClass("navbar-shrink");
        }
    };
    // Collapse now if page is not at top
    navbarCollapse();
    // Collapse the navbar when page is scrolled
    $(window).scroll(navbarCollapse);
})(jQuery); // End of use strict

正如我在图片中展示的

if ($("#mainNav").offset().top > 100)

这部分没有执行。

我的问题是我需要以适当的方式将此主题移动到 Angular 项目中。

请帮忙。

谢谢你。

标签： javascriptjqueryangular

解决方案

推荐阅读