angular 2 owlCarousel 不是函数答案

【问题标题】：angular 2 owlCarousel is not a functionangular 2 owlCarousel 不是函数
【发布时间】：2017-09-07 06:32:56
【问题描述】：

我正在尝试将 owlcarousel 2 与 angular 4 一起使用。我有以下设置：

.angular-cli.json:

  "scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js",
                  "../node_modules/owl.carousel/dist/owl.carousel.js"
                ],

offers-component.ts:

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


declare var $: any;

@Component({
  selector: 'home-offers-container',
  templateUrl: '../templates/home-offers-container.template.html',
  styleUrls: ['../css/home-offers-container.component.css']
})

export class HomeOffersContainerComponent implements AfterViewInit {
  ngAfterViewInit() {
    $('.owl-carousel').owlCarousel();
  }
}

template.html

<div class="row">
    <div class="container">
      <home-offers class="owl-carousel"></home-offers>
    </div>
</div>

我收到一个错误ERROR TypeError: $(...).owlCarousel is not a function。我不明白为什么会弹出这个错误。我已经按原样订购了脚本 - 首先是 jquery，然后是 owlcarousel。此外 typescriptp 不会在 jQuery 上给出任何错误。我错过了什么/没有正确加载owlCarousel？

我必须在 app.module.ts 中导入 jQuery / owlCarousel 吗？如果是，有什么建议吗？

【问题讨论】：

标签： jquery angular owl-carousel-2

【解决方案1】：

Carousel 通过以下更改为我工作

- import * as $ from 'jquery';

-import 'owl.carousel';

+ 声明 var $: any;

其余组件代码相同

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


declare var $: any;

@Component({
  selector: 'home-offers-container',
  templateUrl: '../templates/home-offers-container.template.html',
  styleUrls: ['../css/home-offers-container.component.css']
})

export class HomeOffersContainerComponent implements AfterViewInit {
  ngAfterViewInit() {
    $('.owl-carousel').owlCarousel();
  }
}

发布此答案以帮助将来的人们。

https://github.com/dereklin/angular-cli-owl-carousel/commit/bd6b30acfee00f60516b541a4da6c5608a2b7b25

【讨论】：

【解决方案2】：

而不是直接访问 ViewInit 中的类

尝试使用 ViewChild 喜欢

<home-offers class="owl-carousel" #owl></home-offers>

@ViewChild('owl')owl:ElementRef;

  ngAfterViewInit() {
    $(this.owl.nativeElement).owlCarousel();
  }

【讨论】：

问题是，似乎 owlCarousel 没有正确注册自己。如果在页面加载后我在 chrome 控制台中尝试 - $('.owl-carousel').owlCarousel() 我仍然得到同样的错误。

【解决方案3】：

在 Angular 中使用 jQuery 进行 DOM 操作不是正确的方法。

您可以通过以下方式使用 ViewChild 装饰器访问您的 DOM 元素：

@Component({
    ....
    templateUrl: 'mytemplate.html'
})

export class MyComponent{
  @ViewChild('selector') private elementName;
  ngAfterViewInit() {
     //this is your dom
     this.elementName.owlCarousel();
  }
}

在你的模板类中你必须指定谁是那个选择器

<home-offers class="owl-carousel" #selector> </home-offers>

【讨论】：

【解决方案4】：

你只需要安装这个模块 npm install --save-dev @types/owlcarousel 问候

【讨论】：