angular - 来自 html-template 的 Angular 应用程序在模板 js 上获取 TypeError

Question

尝试使用这个 html 模板创建一个 angular(11) 应用程序。https://bootstrapmade.com/flexstart-bootstrap-startup-template/

但是在模板的 js 文件中出现此错误。

main.js:29 Uncaught TypeError: Cannot read property 'addEventListener' of null
at on (main.js:29)
at main.js:113
at main.js:317

像这样添加了css和js。

index.html，与模板 index.html 相同

<!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

和 js，在angular.json

"scripts": [
              "src/assets/vendor/bootstrap/js/bootstrap.bundle.js",
              "src/assets/vendor/aos/aos.js",
              "src/assets/vendor/php-email-form/validate.js",
              "src/assets/vendor/swiper/swiper-bundle.min.js/",
              "src/assets/vendor/purecounter/purecounter.js",
              "src/assets/vendor/isotope-layout/isotope.pkgd.min.js",
              "src/assets/vendor/glightbox/js/glightbox.min.js",
              "src/assets/js/main.js"
            ]

和main.js代码

[![(function() {
  "use strict";

  /**
   * Easy selector helper function
   */
  const select = (el, all = false) => {
    el = el.trim()
    if (all) {
      return \[...document.querySelectorAll(el)\]
    } else {
      return document.querySelector(el)
    }
  }

  /**
   * Easy event listener function
   */
  const on = (type, el, listener, all = false) => {
    if (all) {
      select(el, all).forEach(e => e.addEventListener(type, listener))
    } else {
      select(el, all).addEventListener(type, listener)
    }
  }]

Answer 1

为什么要在Angular 11 应用程序中编写 JavaScript？TypeScript 在现代Angular应用程序中应该是标准的，如果可能的话，我建议你改用它。打字稿配置

TypeScript 是 Angular 应用程序开发的主要语言。

一定是你的代码在准备好main.js之前就被执行了.mobile-nav-toggle。此时该元素不可用，因此它正在抛出null. 因此，您必须在完全渲染main.js后执行代码 。.mobile-nav-toggle

如果您不设置问题的Stackblitz示例，则很难准确定位错误发生的位置。请这样做以获得更准确的答案。Stackblitz Angular 标准设置

Answer 2

我建议将您的 main.js（应该是 main.ts）代码放在 OnInit 方法中。

ngOnInit() {
  //...code goes here...
  const on = (type, el, listener, all = false) => {
    let selectEl = select(el, all)
    if (selectEl) {
        if (all) {
            selectEl.forEach(e => e.addEventListener(type, listener))
        } else {
            selectEl.addEventListener(type, listener)
        }
    }
  }
}

Answer 3

在 main.js 中将 /** Easy event listener function */ 替换为下面给出的。

const on = (type, el, listener, all = false) => {
    let selectEl = select(el, all)
    if (selectEl) {
        if (all) {
            selectEl.forEach(e => e.addEventListener(type, listener))
        } else {
            selectEl.addEventListener(type, listener)
        }
    }
}