gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:23:11 27 4
gpt4 key购买 nike

您好,我想在 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

最佳答案

Angular 团队建议不要将 jQuery 与 Angular 一起使用。 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>

关于javascript - 外部 JavaScript 在 Angular 5 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49024072/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com