如何将 JQuery iCheck 导入 Angular 2/4

Question

我尝试在 Angular 4 中使用 iChek 库。但是当我在我的 TypeScript 文件中使用它时，我收到了如下错误：“类型 'JQuery' 上不存在属性 'iCheck'”

我的代码：

   import { Directive, ElementRef, HostListener, Input } from '@angular/core';

import * as $ from 'jquery';

@Directive({
  selector: '[icheck]'
})

export class IcheckDirective {
  constructor(el: ElementRef) {
     $(el).iCheck({
            checkboxClass: 'icheckbox_square-aero',
            radioClass: 'iradio_square-aero'
     })
  }
}

我想在我的组件中使用这个指令，比如：

 <label class="radio icheck-inline menu-label">
                <input type="radio" icheck name="filters.type" value="IN"> Entrant 
            </label>

有人有问题请解决？

Answer 1

安装

npm install jquery
npm install -D @types/jquery
npm install icheck
npm install -D@types/icheck

在“scripts”属性中将脚本添加到 /.angular-cli.json 文件中

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/icheck/icheck.js"
],

在 /src/styles.css 文件中添加 icheck 皮肤

@import '../node_modules/icheck/skins/square/blue.css';

现在你可以在 typescript 中使用 icheck 库了

import { Component, OnInit, OnDestroy } from '@angular/core';
import { } from 'jquery';
import { } from 'icheck';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  icheck: JQuery;

  constructor() {
  }

  ngOnInit() {

    // call iCheck
    const icheckOptions: ICheckOptions = {
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%'
    };
    this.icheck = jQuery('input').iCheck(icheckOptions);
  }
}

Answer 2

首先使用 npm 安装以下内容。

npm install jquery
npm install -D @types/jquery
npm install icheck

之后，您应该在 .angular-cli.json 中包含 iCheck javascript 文件

 "scripts": [
        "../node_modules/jquery/dist/jquery.js",
         "../node_modules/icheck/icheck.js"]

希望这能解决您的问题

Answer 3

试试这个

declare var $: any;

@Directive({
  selector: '[icheck]'
})

export class IcheckDirective {
    $: any = $;
    constructor(el: ElementRef) {
         this.$(el.nativeElement).iCheck({
            checkboxClass: 'icheckbox_square-aero',
            radioClass: 'iradio_square-aero'
        })
    }
}