外部jQuery文件不适用于angular 4

我在app.component.html上有以下html代码：

<!--================Testimonials Area =================-->
<section class="testimonials_area p_100">
<div class="container">
    <div class="testimonials_slider owl-carousel">
        <div class="item">
            <div class="media">
                <img class="d-flex rounded-circle" src="assets/img/testimonials-1.png" alt="">
                <div class="media-body">
                    <img src="assets/img/dotted-icon.png" alt="">
                    <p>I wanted to mention that these days, when the opposite of good customer and tech support tends to be the norm, it’s always great having a team like you guys at Fancy! So, be sure that I’ll always spread the word about how good your product is and the extraordinary level of support that you provide any time there is any need for it.</p>
                    <h4><a href="#">Aigars Silkalns</a> - CEO DeerCreative</h4>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="media">
                <img class="d-flex rounded-circle" src="assets/img/testimonials-1.png" alt="">
                <div class="media-body">
                    <img src="assets/img/dotted-icon.png" alt="">
                    <p>I wanted to mention that these days, when the opposite of good customer and tech support tends to be the norm, it’s always great having a team like you guys at Fancy! So, be sure that I’ll always spread the word about how good your product is and the extraordinary level of support that you provide any time there is any need for it.</p>
                    <h4><a href="#">Aigars Silkalns</a> - CEO DeerCreative</h4>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="media">
                <img class="d-flex rounded-circle" src="assets/img/testimonials-1.png" alt="">
                <div class="media-body">
                    <img src="assets/img/dotted-icon.png" alt="">
                    <p>I wanted to mention that these days, when the opposite of good customer and tech support tends to be the norm, it’s always great having a team like you guys at Fancy! So, be sure that I’ll always spread the word about how good your product is and the extraordinary level of support that you provide any time there is any need for it.</p>
                    <h4><a href="#">Aigars Silkalns</a> - CEO DeerCreative</h4>
                </div>
            </div>
        </div>
    </div>
</div>

我想说的是，现在，当良好的客户和技术支持的反面成为常态时，拥有像你们这样的团队在Fancy总是很棒的！因此，请确保我将始终宣传您的产品有多好，以及您在任何需要时提供的非凡支持水平

-首席执行官DeerCreative
我想说的是，现在，当良好的客户和技术支持的反面成为常态时，拥有像你们这样的团队在Fancy总是很棒的！因此，请确保我将始终宣传您的产品有多好，以及您在任何需要时提供的非凡支持水平

-首席执行官DeerCreative
我想说的是，现在，当良好的客户和技术支持的反面成为常态时，拥有像你们这样的团队在Fancy总是很棒的！因此，请确保我将始终宣传您的产品有多好，以及您在任何需要时提供的非凡支持水平

-首席执行官DeerCreative

这需要我在资产文件夹中添加的jQuery文件

jQuery在我的angular项目中安装并运行良好控制台中没有错误，我在angular-cli.json中添加了路径，但是文件中的jQuery代码没有被调用，因此没有任何功能，我得到一个空白部分

模板工作正常，因此jQuery代码是正确的

---

有什么帮助吗？

从您的控制台尝试一下。它对我有用

npm install -D @types/jquery

---

在angular上使用jQuery插件。只需要很少的步骤

首先导入jQuery

导入你的插件（这里是OwlCaroussel）

像这样准备组件

my.component.ts

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

// To avoid compile error, let declare jQuery has new usable variable without override original content
declare var $:any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  @ViewChild('sliderContent') sliderElement: ElementRef;

  ngAfterViewInit() {
     // your plugin have to be init after the view are init. That means when Angular have finish to add html on DOM.
      // Best approch is to use ViewChild to consume HTMLElement in Angular.
      $(this.sliderElement.nativeElement).owlCarousel();
      // Uncomment this line if you want to let jQuery target himself your element.
      // $(".owl-carousel").owlCarousel();
  }
}

在html上，只需修改：

<div class="testimonials_slider owl-carousel">

借

不，我们必须注意你的部件上的一些东西

declare var$：any使组件上的jQuery可用

ngAfterViewInit（）
*我们希望在html真正可用时初始化转盘。
$（this.sliderElement.nativeElement.owlCarousel（）我们使用ViewChild改进HtmleElement访问并降低副作用风险

不要将jquery与angular一起使用。我在这篇文章中解释了原因：谢谢你详细的回答！正如您所说的，该部分不再是空的，但它应该一次显示每个div，而不是同时显示其中的3个div。事实上，我需要使用自定义owl.carousel.min.js中的函数，而不是默认的owlCarousel（）。我该怎么做呢？关于你的第一个问题，我想这只是一些需要配置的东西。关于第二个问题，您可以用自己的和
$（this.sliderElement.nativeElement.owlCarousel（）替换依赖关系根据您自己的代码我的问题是组件无法读取文件中的js代码，我已将其放在正确的路径中，但它似乎无法读取。请更新您的问题，并提供有关您的问题的更多详细信息。
<div class="testimonials_slider owl-carousel" #sliderContent>