我试图使用owl.carousel到我的角度应用程序，这里是一个目标是什么的小提琴 .
https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html
我采取的步骤是：
-
从owl-carousel网站下载了zip
-
将它们粘贴在../node_modules/owlCarousel/上
-
不需要在index.html上添加.css和.js文件，因为它是一个内部模块（可以在node_modules上找到）
在angular-cli.json上，我在脚本上添加了那些.js文件的路径
"scripts": [
"../node_modules/owlCarousel/dist/owl.carousel.js",
"../node_modules/owlCarousel/dist/owl.carousel.min.js",
....
我在菜单组件上使用旋转木马的问题是，当我在ngInit（）menu.compontent.ts上调用函数时：
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
它给owlCarousel（）一个错误，说'owlCarousel在类型'jQuery'上不存在 .
我是否习惯在index.ts上导出一些东西，用于导出共享文件夹的所有组件？或者我需要在menu.component.ts上导入一些东西，如果有的话，那是什么？
继承我的menu.compontent.ts：
import { Component, OnInit } from '@angular/core';
//import * as $ from "jquery";
declare var $: any;
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
constructor() {
}
ngOnInit() {
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
}
closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
}
2 回答
首先不要加载.js / min.js和.css / min.js，因为你正在加载同一件事的2个版本 .
其次，你不是在编写打字稿，而是在不必要地用jquery污染你的角度 . 以这种方式使用角度是没有意义的 . 不建议以这种方式与DOM交互
使用专门为角度编写的库，并遵循角度最佳实践，例如 . Ng Bootstrap或NGX bootstrap . 否则只需使用html和jquery以及你的猫头鹰库 .
https://ng-bootstrap.github.io/#/components/carousel/examples
https://valor-software.com/ngx-bootstrap/#/carousel
问题是人们从Angular项目开始，为什么人们创建集成了这些jQuery解决方案的npm包 . https://www.npmjs.com/package/angular2-carousel