【发布时间】：2018-07-05 23:35:40
【问题描述】：
我试图在我的 Angular 应用程序中使用 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";
}
}
【问题讨论】：
-
declare const $并删除导入 -
我不再有错误，但轮播不起作用..我得到了一堆滑块的图像。开发者工具输出： GET 172.27.192.205:4201/node_modules/owlCarousel/dist/assets/… net::ERR_ABORTED GET 172.27.192.205:4201/node_modules/owlCarousel/dist/… net::ERR_ABORTED core.js:1427 ERROR TypeError: $(...).owlCarousel is not a function
-
这样不行。您可以在样式[] 内部（node_modules 或其他目录）中包含 CSS，如果它是 CDN，则可以附加到 index.html。
-
那时我认为它是内部的，因为我已经安装了 owl.carousel "npm install --save owl.carousel" 然后我将它包含在样式 [] 和脚本 [] 以及 angular-cli .json .. 我也有它的索引。我必须删除 .css 和 .js 吗？当它是内部的时，我不必在 index.html 上包含链接和脚本？谢谢你..
-
在一个地方只包括。否则，您包含的次数与导入的次数一样多。
标签： javascript jquery angular