开发者问题收集

无法将 js 文件导入 component.ts

2021-10-28
601

您好,我开发了一个 angular 12 应用程序。我将 js 导入到 angular 9 上上一个应用程序中的每个组件中,如下所示:

js 文件:

var mainHandler = {
  init: function(){
    this.responsiveHandler();
  },


  responsiveHandler: function() {
    var self = this;

    // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
    let vh = window.innerHeight * 0.01;
    // Then we set the value in the --vh custom property to the root of the document
    document.documentElement.style.setProperty('--vh', `${vh}px`);

    window.addEventListener('resize', () => {
      // We execute the same script as before
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    });

    $('.btn--toggle-menu').unbind('click').bind('click', function(e){

      /* Toggle Button */
      $(this).add('.header--main').toggleClass('opened');

      /* Toggle Main menu */
      if( !$('.header--main').hasClass('opened') ){
        closeMenu();
      } else {
        openMenu();
      }
    });

    // Close menu on item click / Lang select
    $(document).on('click', '.nav--main li a, .megamenu strong, .megamenu a', function(){
        //e.preventDefault();
                $(this).add('.header--main').removeClass('opened');
                closeMenu();
      });

    $(document).on('click touchstart', 'body', function(e){
      if( $('.header--main').hasClass('opened') && !$(e.target).is('.btn--toggle-menu') && $('.btn--toggle-menu').has(e.target).length === 0 && !$(e.target).is('.megamenu') && $('.megamenu').has(e.target).length === 0 ){
        $(this).add('.header--main').removeClass('opened');
        closeMenu();
      }
    });



    var $viewportWidth = window.innerWidth || document.documentElement.clientWidth;

    // On resize events, recalculate and log
    window.addEventListener('resize', function () {

      $viewportWidth = window.innerWidth || document.documentElement.clientWidth;

      if(window.innerWidth >= 1024){
        $('.btn--toggle-menu, .header--main').removeClass('opened');
      }
    }, false);

    function openMenu(){
      /* $('body').css({
        'overflow': 'hidden'
      });
      stopBodyScrolling(true); */
    }
    function closeMenu(){
      /* $('body').css({
        'overflow': ''
      });
      stopBodyScrolling(false); */
    }

    var freezeVp = function(e) {
      e.preventDefault();
    };

    function stopBodyScrolling (bool) {
      if (bool === true) {
        document.addEventListener("touchmove", freezeVp, {passive: false});

      } else {
        document.removeEventListener("touchmove", freezeVp, {passive: false});
      }
    }
  },

  closeMenu: function() {
    $('.header--main').removeClass('opened');
    $('body').css({
      'overflow': ''
    });
  }

};
module.exports = mainHandler;

component.ts 文件:

import * as script from 'src/.../file.js';

ngOnInit() {
  script.init()
}

并且它运行良好,但在 angular 12 应用程序中它不再运行并返回此错误:

找不到模块“src/assets/js/file.js”的声明文件。'c:/Users/.../src/assets/js/file.js' 隐式具有“any”类型。

1个回答

我终于找到了一个解决方案,也许这不是最好的方法,但它确实有效。 只需将:

"noImplicitAny": false,

添加到 tsconfig.json 中的编译器选项中。 当您定义常量但只需将其添加为任何值时,您可能会遇到新的错误。

Chatcal
2021-11-04