Question

我正在尝试使用带角度4的打字稿类的jQuery插件，但遗憾的是我没有成功实现我的目标。

我试过很多方面，但有角度的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;
  }
}

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

this。$ owlElement = $（this.el.nativeElement）.owlCarousel（this.defaultOptions）;

和错误消息是：

严重级代码描述项目文件行抑制状态错误TS2339 Build：属性'owlCarousel'在'JQuery'类型上不存在。 On.Store.UI L：\ ESaleStore \ On.Store.UI \ src \ On.Store.UI \ wwwroot \ app \ shared \ OwlCarousel.component.ts 24
错误TS2339属性'owlCarousel'在'JQuery'类型上不存在。 On.Store.UI（tsconfig项目）L：\ ESaleStore \ On.Store.UI \ src \ On.Store.UI \ wwwroot \ app \ shared \ OwlCarousel.component.ts 24 Active

这是我的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（here）上有一个OwlCarousel的预建模块，尝试一下，看看它是否适合你。

另外，这篇文章是关于Angular 4的，因此您应该将代码更改为angular而不是angularjs。

如何在typescript类中使用角度为4的jquery插件（如Owl Carousel 2）？

1 个答案: