Js文件在Angular项目中导入时不起作用

Posted 2023-03-05

【中文标题】Js文件在Angular项目中导入时不起作用

【英文标题】：Js file doesn't work when imported in Angular project

【发布时间】：2022-01-23 01:17:31

【问题描述】：

我在我的 Angular 项目中使用了 html 模板。一切似乎都很好，直到我意识到某些 js 文件无法正常工作，从而影响了整个项目。最重要的部分是即使 main.js 文件也不起作用。我的 lect 说要忽略 js 并重新创建哪个部分不起作用，但我正在尝试使用这个文件，因为那里有很多东西。

这是 main.js 文件中的代码，这里有没有和 Angular 不兼容的地方？

这是我第一次使用 ***，如果我问的方式有什么问题，我很抱歉

(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) => 
    let selectEl = select(el, all)
    if (selectEl) 
      if (all) 
        selectEl.forEach(e => e.addEventListener(type, listener))
       else 
        selectEl.addEventListener(type, listener)
      
    
  

  /**
   * Easy on scroll event listener 
   */
  const onscroll = (el, listener) => 
    el.addEventListener('scroll', listener)
  

  /**
   * Navbar links active state on scroll
   */
  let navbarlinks = select('#navbar .scrollto', true)
  const navbarlinksActive = () => 
    let position = window.scrollY + 200
    navbarlinks.forEach(navbarlink => 
      if (!navbarlink.hash) return
      let section = select(navbarlink.hash)
      if (!section) return
      if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) 
        navbarlink.classList.add('active')
       else 
        navbarlink.classList.remove('active')
      
    )
  
  window.addEventListener('load', navbarlinksActive)
  onscroll(document, navbarlinksActive)

  /**
   * Scrolls to an element with header offset
   */
  const scrollto = (el) => 
    let header = select('#header')
    let offset = header.offsetHeight

    let elementPos = select(el).offsetTop
    window.scrollTo(
      top: elementPos - offset,
      behavior: 'smooth'
    )
  

  /**
   * Toggle .header-scrolled class to #header when page is scrolled
   */
  let selectHeader = select('#header')
  if (selectHeader) 
    const headerScrolled = () => 
      if (window.scrollY > 100) 
        selectHeader.classList.add('header-scrolled')
       else 
        selectHeader.classList.remove('header-scrolled')
      
    
    window.addEventListener('load', headerScrolled)
    onscroll(document, headerScrolled)
  

  /**
   * Back to top button
   */
  let backtotop = select('.back-to-top')
  if (backtotop) 
    const toggleBacktotop = () => 
      if (window.scrollY > 100) 
        backtotop.classList.add('active')
       else 
        backtotop.classList.remove('active')
      
    
    window.addEventListener('load', toggleBacktotop)
    onscroll(document, toggleBacktotop)
  

  /**
   * Mobile nav toggle
   */
  on('click', '.mobile-nav-toggle', function(e) 
    select('#navbar').classList.toggle('navbar-mobile')
    this.classList.toggle('bi-list')
    this.classList.toggle('bi-x')
  )

  /**
   * Mobile nav dropdowns activate
   */
  on('click', '.navbar .dropdown > a', function(e) 
    if (select('#navbar').classList.contains('navbar-mobile')) 
      e.preventDefault()
      this.nextElementSibling.classList.toggle('dropdown-active')
    
  , true)

  /**
   * Scrool with ofset on links with a class name .scrollto
   */
  on('click', '.scrollto', function(e) 
    if (select(this.hash)) 
      e.preventDefault()

      let navbar = select('#navbar')
      if (navbar.classList.contains('navbar-mobile')) 
        navbar.classList.remove('navbar-mobile')
        let navbarToggle = select('.mobile-nav-toggle')
        navbarToggle.classList.toggle('bi-list')
        navbarToggle.classList.toggle('bi-x')
      
      scrollto(this.hash)
    
  , true)

  /**
   * Scroll with ofset on page load with hash links in the url
   */
  window.addEventListener('load', () => 
    if (window.location.hash) 
      if (select(window.location.hash)) 
        scrollto(window.location.hash)
      
    
  );

  /**
   * Preloader
   */
  let preloader = select('#preloader');
  if (preloader) 
    window.addEventListener('load', () => 
      preloader.remove()
    );
  

  /**
   * Clients Slider
   */
  new Swiper('.clients-slider', 
    speed: 400,
    loop: true,
    autoplay: 
      delay: 5000,
      disableOnInteraction: false
    ,
    slidesPerView: 'auto',
    pagination: 
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    ,
    breakpoints: 
      320: 
        slidesPerView: 2,
        spaceBetween: 40
      ,
      480: 
        slidesPerView: 3,
        spaceBetween: 60
      ,
      640: 
        slidesPerView: 4,
        spaceBetween: 80
      ,
      992: 
        slidesPerView: 6,
        spaceBetween: 120
      
    
  );

  /**
   * Porfolio isotope and filter
   */
  window.addEventListener('load', () => 
    let portfolioContainer = select('.portfolio-container');
    if (portfolioContainer) 
      let portfolioIsotope = new Isotope(portfolioContainer, 
        itemSelector: '.portfolio-item'
      );

      let portfolioFilters = select('#portfolio-flters li', true);

      on('click', '#portfolio-flters li', function(e) 
        e.preventDefault();
        portfolioFilters.forEach(function(el) 
          el.classList.remove('filter-active');
        );
        this.classList.add('filter-active');

        portfolioIsotope.arrange(
          filter: this.getAttribute('data-filter')
        );
        portfolioIsotope.on('arrangeComplete', function() 
          AOS.refresh()
        );
      , true);
    

  );

  /**
   * Initiate portfolio lightbox 
   */
  const portfolioLightbox = GLightbox(
    selector: '.portfolio-lightbox'
  );

  /**
   * Portfolio details slider
   */
  new Swiper('.portfolio-details-slider', 
    speed: 400,
    loop: true,
    autoplay: 
      delay: 5000,
      disableOnInteraction: false
    ,
    pagination: 
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    
  );

  /**
   * Testimonials slider
   */
  new Swiper('.testimonials-slider', 
    speed: 600,
    loop: true,
    autoplay: 
      delay: 5000,
      disableOnInteraction: false
    ,
    slidesPerView: 'auto',
    pagination: 
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    
  );

  /**
   * Animation on scroll
   */
  window.addEventListener('load', () => 
    AOS.init(
      duration: 1000,
      easing: "ease-in-out",
      once: true,
      mirror: false
    );
  );

)()```

【参考方案1】：

你需要把这个代码逻辑导出，并在你需要的文件中导入。

让我们将所有代码放在一个名为 a.js 的文件中。

你的文件变成

export default a = (function () 
  "use strict";

...

让我们在与 a.js 相同的级别上创建一个名为 b.js 的文件 然后你在b.js中导入如下

import a from "./a"

注意

一旦你将a.js导入任何文件，里面的所有逻辑都会自动执行（你可以在最后看到函数执行），因为函数自己执行。

【讨论】：

我试过了，它没有用，但我不小心在(function() 之前添加了 $ 并且它突然起作用了。但是，仍然有一个错误说main.js:8 Uncaught ReferenceError: $ is not defined at main.js:8

@dee 您需要将包重命名为您想要命名的任何名称。所以在你的情况下，你似乎想要为 JQuery 使用 $ 符号，所以你应该写 export default a 而不是：export default $ 并将其导入另一个文件。