jquery - 如何在 typescript 类中将 jquery 插件(如 Owl Carousel 2)与 Angular 4 一起使用？

Question

我正在尝试将 jQuery 插件与 Angular 4 Typescript 类一起使用，但不幸的是我没有成功实现我的目标。

我尝试了很多方法，但 Angular 4 html 组件 View 不允许 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;
  }
}

Visual Studio 编译器在此行显示红色错误。

this.$owlElement = $(this.el.nativeElement).owlCarousel(this.defaultOptions);

错误消息是:

严重性代码描述项目文件行抑制状态错误 TS2339 构建:类型“JQuery”上不存在属性“owlCarousel”。 On.Store.UI L:\ESaleStore\On.Store.UI\src\On.Store.UI\wwwroot\app\shared\OwlCarousel.component.ts 24
错误 TS2339 类型“JQuery”上不存在属性“owlCarousel”。 On.Store.UI (tsconfig 项目) L:\ESaleStore\On.Store.UI\src\On.Store.UI\wwwroot\app\shared\OwlCarousel.component.ts 24 事件

这是我的 tsconfig.json

  {
  "compilerOptions": {    
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules"
  ]
}

这是我的 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);

`

请指导我。谢谢你

Answer 1

我想知道您的 OwlCarousel 是否正确包含在内。npm 上有一个针对 OwlCarousel 的预构建模块 ( here )，请尝试一下，看看它是否适合您。

此外，这篇文章是关于 Angular 4 的，因此您应该将标记更改为 Angular 而不是 Angularjs。