Question

我试图将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
        }
    }
    });

Answer 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

希望有用。

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

1 个答案: