Angular html模板的角度应用程序在模板js上获取TypeError

尝试使用此html模板创建一个angular（11）应用程序

但是在模板的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">

还有

main.js

code

[![(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)
    }
  }]

---

为什么要在Angular11应用程序中编写JavaScript？TypeScript应该是现代角度应用程序的标准，如果可能的话，我建议您使用它

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

您在

main.js

中的代码必须在

.mobile nav toggle

准备就绪之前执行。此时该元素不可用，因此抛出

null

。因此，在has

.mobile nav toggle

完全呈现后，必须生成

main.js

代码才能执行

---

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

main.js中给出的替换/**Easy event listener函数*/

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)
        }
    }
}

---

我猜第18行返回空值？调用时是否呈现了该元素

.mobile nav toggle

？请共享您的HTMLC您可以发布stackblitz演示吗？通常使用angular，您会将依赖于视图的代码（如tag with.mobile nav toggle）放入ngOnInit（）以确保您的标记在那里…发布html文件也很好

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)
        }
    }
}