如何在typescript类中将jquery插件（如Owl Carousel 2）与angular 4一起使用？

我试图将jQuery插件用于angular 4 typescript类，但不幸的是，我没有成功实现我的目标

我尝试了很多方法，但angular 4 html组件视图不允许jQuery就绪/其他事件，所以我如何使用它们

我目前创建了一个组件typescript类，并尝试在其中使用jquery函数，但没有成功

请参阅下面我的代码：

 import { Component, Input, ElementRef, HostBinding } from '@angular/core';
import * as $ from 'jquery';
import 'owl-carousel';

@Component({
  selector: 'owl-carousel',
  template: `<ng-content></ng-content>`
})
export class OwlCarouselComponent {
    @HostBinding('class') defaultClass = 'owl-carousel';
    @Input() options: Object;

  $owlElement: any;

  defaultOptions: any = {};

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    // use default - empty
    // for (var key in this.options) {
    //   this.defaultOptions[key] = this.options[key];
    // }
    this.$owlElement = $(this.el.nativeElement).owlCarousel(this.defaultOptions);
  }

  ngOnDestroy() {
    this.$owlElement.data('owlCarousel').destroy();
    this.$owlElement = null;
  }
}

这是我的systemjs.config.js文件

`/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            jquery: 'npm:@angular/jquery/dist/jquery.min.js',
            'owl-carousel': 'npm:@angular/owl.carousel/dist/owl.carousel.min.js' 
        },
        meta: {
            'owl-carousel': {
                deps: ['jquery']
            },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

`

---

请引导我。谢谢

我想知道您的猫头鹰转盘是否被正确包括在内。 npm（）上有一个预构建的OwlCarousel模块，试试看它是否适合您

---

另外，这篇文章是关于Angular 4的，所以你应该将标签改为

Angular

，而不是

angularjs

谢谢adrian。我试着用nmp安装它，得到了这个。为什么不推荐。npm[On.Store.UI]安装ng2 owl转盘——保存npm警告不推荐的ng2 owl-carousel@0.1.15：警告：此项目已重命名为角形猫头鹰旋转木马。使用npm安装-保存角形猫头鹰旋转木马。棱角的-quickstart@1.0.0L:\eSalStore\On.Store.UI\src\On.Store.UI+--未满足的对等依赖项@angular/compiler@4.0.1+--未满足的对等依赖@angular/core@4.0.1+--角度/平台未满足对等依赖关系-browser@4.0.1+--角度/平台浏览器未满足的对等依赖关系-dynamic@4.0.1+--ng2猫头鹰-carousel@0.1.15

——protractor@4.0.14   

-->类型/node@6.0.78npm WARN可选跳过可选依赖项：fsevents@^1.0.0（node_modules\chokidar\node_modules\fsevents）：npm WARN notsup跳过可选依赖项：不支持的平台fsevents@1.1.1：通缉{“os”：“达尔文”，“拱门”：“任何”}（当前：{“os”：“win32”，“拱门”：“x64”}）npm WARN ENOUNT ENOUNT:没有这样的文件或目录，请打开'L:\ESALSTORE\On.Store.UI\src\On.Store.UI\node\u modules\Cartjs\package.json'npm WARN@angular/upgrade@2.1.2需要@angular的对等方/core@2.1.2但没有安装。npm警告@角度/upgrade@2.1.2需要@angular的对等方/compiler@2.1.2但没有安装。npm警告@角度/upgrade@2.1.2需要@angular/platform的对等方-browser@2.1.2但没有安装。npm WARN@angular/upgrade@2.1.2需要@angular/platform浏览器的对等方-dynamic@2.1.2但没有安装。[On.Store.UI]安装ng2 owl转盘——保存已成功完成，因此这里似乎存在一些问题，但大多数情况下只需遵循npm的说明即可。用法：npm安装--保存角形猫头鹰转盘以进行安装。尝试通过npm安装angular。另外，您是否正在使用angular cli？依赖性问题看起来好像您的Angular安装不是由npm管理的。

`/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            jquery: 'npm:@angular/jquery/dist/jquery.min.js',
            'owl-carousel': 'npm:@angular/owl.carousel/dist/owl.carousel.min.js' 
        },
        meta: {
            'owl-carousel': {
                deps: ['jquery']
            },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);