如何将JQuery iCheck导入Angular 2/4

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

我的代码：

   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>

参赛者

---

有人有问题，请解决它？

首先使用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"]

---

希望这能解决您的问题

首先使用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"]

希望这能解决您的问题

试试这个

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'
        })
    }
}

试试这个

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'
        })
    }
}

安装

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 sking

@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);
  }
}

安装

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 sking

@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);
  }
}

---

谢谢你的回复。。是的，我安装了。。我在我的.angular-cli.json中添加了，但不起作用。。；在ts文件中，当我写到：

constructor（el:ElementRef）{$（el）.iCheck（{..}）

我在iCheck中有一个红色的标记，它说：“属性'iCheck'在类型'JQuery'上不存在..你是否通过

import'iCheck'导入了iCheck'

Ok我导入了它，并且在我的输入中添加了

接口JQuery{iCheck（选项？：任意，回调？：函数）：任意；}

。我现在没有红色标记..但是当我运行应用程序时，

编译失败。属性“iCheck”在类型“JQuery”上不存在。

Hmm..这就是所有需要的。无论如何，我会检查谢谢你..例如在这个网站上，他解释了如何将JQuery集成到TypeScript中…但是当我尝试使用iCheck时..这对你的应用程序来说是不好的回复..是的，我安装了..我在我的.angular-cli.json中添加了..，但没有工作..；在ts文件中，当我写：

constructor（el:ElementRef）{$（el）.iCheck（{..}）

我在iCheck中有一个红色标记，它说：“属性'iCheck'在类型'JQuery'上不存在”…您是否通过

import'icheck'

Ok导入了icheck？我导入了它，并在我的typings.d.ts中添加了

interface JQuery{icheck（选项？：any，回调？：函数）：any；}

。我现在没有红色标记..但是当我运行应用程序时，

编译失败。属性“iCheck”在类型“JQuery”上不存在。

Hmm..这就是所有需要的。无论如何我会检查谢谢你..例如在这个网站上，他解释了如何将JQuery集成到TypeScript中…但是当我尝试使用iCheck时..这不太好了太多了