Question

我在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>

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

jQuery已安装并在我的角度项目中工作正常，控制台中没有错误，我在angular-cli.json中添加了路径，但是文件中的jQuery代码没有被调用，所以没有任何工作，我得到了一个空白部分。

模板在angular之外工作正常，因此jQuery代码是正确的。

任何帮助？

Answer 1

从您的控制台尝试此操作。它对我有用。

npm install -D @types/jquery

Answer 2

在角度上使用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();
  }
}

，只需修改：

<div class="testimonials_slider owl-carousel">

通过

<div class="testimonials_slider owl-carousel" #sliderContent>

不，我们必须注意到您组件上的一些事情。

declare var $:any; 在您的组件上提供jQuery
ngAfterViewInit() *当html确实可用时，我们想要初始化轮播。 $(this.sliderElement.nativeElement).owlCarousel(); 我们使用ViewChild来改善HTMLElement访问并降低副作用的风险。

Online Sample

外部jQuery文件无法处理角度4

2 个答案: