将外部文件js添加到Angular 9项目

问题描述

我试图将script.js添加到angular.json并在一个组件中使用它。那不行那些建议将脚本标签添加到我的html文件中的人不是一个好主意。有人可以提出另一个想法或我想让我的脚本起作用的东西吗？

我在angular.json上添加了名为script.js的js文件

 "scripts": [
          "src/assets/js/script.js"
        ]

然后在slider.ts中声明一个变量

  declare const owlCarousel: any;
  ngOnInit() {
    owlCarousel();
  }

script.js

$('.owl-carousel').owlCarousel({
    loop:true,margin:10,dots:false,nav:true,mouseDrag:false,autoplay:true,animateOut: 'slideOutUp',responsive:{
        0:{
            items:1
        },600:{
            items:1
        },1000:{
            items:1
        }
    }
    });
        

解决方法

尝试一下

在您的script.js中首先添加功能

export function owlCarousel() {
    $('.owl-carousel').owlCarousel({
    loop:true,margin:10,dots:false,nav:true,mouseDrag:false,autoplay:true,animateOut: 'slideOutUp',responsive:{
        0:{
            items:1
        },600:{
            items:1
        },1000:{
            items:1
        }
    }
    });
}

然后在您的组件中将此行添加到导入功能owlCarousel

 import {owlCarousel} from '../../assets/js/script.js' /plz add correct path 

请注意，不一定要使用lider.ts

希望有用。