Question

您好我想在Angular 5中提供帮助。我使用外部java脚本文件而不使用Owl.Carousel的节点模块。但Owl.Carousel不起作用。在angular-cli.json我有像我这样的链接我的js文件

"scripts": [

        "././assets/js/jquery-2.2.4.min.js",
        "././assets/js/Owl.Carousel.js",
        "././assets/js/slick.min.js",
        "././assets/js/active.js"
      ],

我还尝试将js文件嵌入index.html这样的

<body>
	<app-root></app-root>
	
    <script src="././assets/js/jquery-2.2.4.min.js"></script>
   
    <script src="././assets/js/Owl.Carousel.js"></script>
    
    <script src="././assets/js/slick.min.js"></script>
  
    <script src="././assets/js/active.js"></script>
</body>
</html>

但这两种方式都行不通，Owl.Carousel无法正常工作。而且我也不必在我的控制台中显示任何错误。 My project structure is like this

Answer 1

Angular团队建议不要在Angular中使用jQuery。 jQuery最初设计为DOM操作库，Angular团队表示这是一种不推荐的做法。

我通常使用Carrousel的Bootstrap指令：

https://ng-bootstrap.github.io/#/components/carousel/examples。

它使用简单，你可以获得很棒的结果：

 <ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

Answer 2

您可以将外部JS和CSS添加到assets文件夹，并将其链接到.angular-cli.json，如下所示：

assets/js/my-js-file.js

如果你的文件链接正确，那么你必须在AfterViewInit生命周期钩子中初始化轮播。

工作示例：

https://stackblitz.com/edit/owl-carousel-example

Answer 3

由于Angular团队不鼓励开发人员在您的应用程序中使用javascript。如果您找不到其他解决方案，则可以使用它你的文件路径应该是这样的

<script src="assets/js/jquery-2.2.4.min.js"></script>
<script src="assets/js/Owl.Carousel.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/active.js"></script>

外部JavaScript在Angular 5中无法正常工作

3 个答案: