Javascript 将external.js/.css导入angular4应用程序

我试着在我的angular应用程序上使用owl.carousel，这里有一个目标

我采取的步骤是：

从猫头鹰旋转木马网站下载了zip

将它们粘贴到../node_模块/owlCarousel上/

不需要在index.html上添加.css和.js文件，因为它是一个内部模块，可以在node_模块上找到

在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();
});

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";
}
}

它在owlCarousel上给出了一个错误，表示类型“jQuery”上不存在owlCarousel

我是否可以导出index.ts上用于导出共享文件夹所有内容的内容？或者我需要导入menu.component.ts上的内容，如果是，是什么

这是我的菜单

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

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";
}
}

---

首先，不要同时加载.js/min.js和.css/min.js，因为您正在加载同一事物的两个版本

其次，您没有编写typescript，不必要地使用jquery污染了您的系统。以这种方式使用angular没有意义。不建议以这种方式与DOM交互

使用专门为angular编写的库，并遵循angular最佳实践，例如Ng引导或NGX引导。否则，只需使用html、jquery和owl库

---

问题是，从Angular项目开始的人不明白，如果没有很好地集成，jQuery将给您带来问题。这就是为什么人们创建集成这些jQuery解决方案的npm包

声明const$和delete importi停止出现错误，但转盘不工作。。我得到了一堆滑块的图像。开发者工具输出：GET net:：ERR_ABORTED GET net:：ERR_ABORTED core.js:1427 ERROR TypeError:$..owlCarousel不是一个函数，它不是这样工作的。当CSS是internalnode_模块或其他目录时，可以在styles[]中包含CSS，如果它是CDN，则可以通过附加到index.html来包含CSS。到那时，我认为它是内部的，因为我已经安装了owl.carousel npm安装-save owl.carousel，然后我将其包含在styles[]和scripts[]以及angular cli.json中。。我也有索引。.css和.js我必须删除它吗？当它是内部的时，我不必在index.html上包含链接和脚本？谢谢你…在一个地方，只包括。否则，您包含的次数与导入的次数相同。谢谢，我认为我必须同时导入这两个操作系统。。我对如何导入图书馆仍然有点困惑。。目标是让一个滑块像菜单一样运行，一组8或9个可点击按钮，然后像我给出的示例一样通过点击和拖动滑动到另一组按钮，我认为owl有我需要的。但是，我仍然需要了解如何以正确的方式导入图书馆，因为我认为我没有用最佳实践来实现这一点。。再次感谢你