来自html-template的Angular Application在模板js上获取TypeError答案

【问题标题】：Angular Application from html-template getting TypeError on template js来自html-template的Angular Application在模板js上获取TypeError
【发布时间】：2021-06-20 11:24:01
【问题描述】：

尝试使用这个 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)
    }
  }]

【问题讨论】：

我猜第 18 行返回 null？那个元素 .mobile-nav-toggle 是在调用它时渲染的吗？
请分享你的html
你能发布一个 stackblitz 演示吗？
通常使用角度，您会将依赖于视图的代码（如带有 .mobile-nav-toggle 的标签）放入 ngOnInit() 以确保您的标签存在 angular.io/api/core/OnInit ...也将是很高兴发布您的 html 文件

标签： angular typeerror html-templates

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

您好，我收到此错误“未捕获的 SyntaxError：标识符 'on' 已被声明”

【解决方案3】：

我建议将您的 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)
        }
    }
  }
}

【讨论】：