时间戳

首页 > 解决方案 > 在 Angular 项目中包含外部 JS 文件不能正常工作

javascript - 在 Angular 项目中包含外部 JS 文件不能正常工作

问题描述

所以我有这种奇怪的行为，其中 Javascript 文件适用于我的 /login 页面，但仅当我在此特定页面上时，而不适用于其他页面。

因此，例如，当我重新加载 Chrome 选项卡以/login使其完美运行时，脚本文件被接受。但是，当我往返于/login它不再起作用时，带有我的小动画的脚本文件将无法运行并且我没有收到任何错误/home/login

我的 login.js 文件位于 assets/scripts 文件夹中，如下所示：

    if (window.location.pathname === '/login') {
  window.onload = function () {
    const sign_in_btn = document.getElementById("sign-in-btn");
    const sign_up_btn = document.getElementById("sign-up-btn");
    const container = document.querySelector(".containerLOGSIGN");

    sign_up_btn.addEventListener("click", () => {
      container.classList.add("sign-up-mode");
    });


    sign_in_btn.addEventListener("click", () => {
      container.classList.remove("sign-up-mode");
    });
  }
}

这window.location.pathname是仅在页面上时执行脚本/login。window.onload就是为了避免这个错误：“ uncaught typeerror cannot read property 'addeventlistener' of null”

最后，我在登录组件 HTML 中链接了脚本路径：

<script type="text/javascript" src="../../assets/scripts/login.js" ></script>

在 angular.json 配置文件中：

"scripts": ["apps/mreza-mladih-platform/src/assets/scripts/login.js"]

感谢您的帮助！

来自德国的问候

标签： javascriptangularroutes

解决方案

我解决了我自己的问题。我使用 [ngclass] 并单击 html 文件上的侦听器以获得相同的结果。

推荐阅读