如何在Angular 4中使用jQuery插件？

我想在角度项目中使用范围滑块，并且尝试使用一个可用模块处理角度4。

它在编译过程中工作正常，但是当我尝试构建它进行部署时，会引发以下错误。

我检查了直接在Angular项目中使用jQuery插件的选项，而我仅在Angular 2中获得了使用它的选项。

有什么方法可以在Angular 4中使用jQuery插件？

请告诉我。

提前致谢！

是的，您可以在Angular 4中使用jquery

脚步：

1）在index.html标签的下面一行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2）在下面的组件ts文件中，您必须像这样声明var

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

并将此代码用于相应的html文件，如下所示：

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

这将为您工作。谢谢

使用npm安装jquery

npm install jquery --save

添加类型

npm install --save-dev @types/jquery

将脚本添加到angular-cli.json

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

建立项目并服务

ng build

希望这可以帮助！享受编码

使用NPM安装jQuery Jquery NPM

npm install jquery

安装jQuery声明文件

npm install -D @types/jquery

在.ts中导入jQuery

import * as $ from 'jquery';

叫课

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}

在安装@ types / jquery时，不需要声明任何jQuery变量。

declare var jquery:any;   // not required
declare var $ :any;   // not required

您应该在任何地方都可以访问jQuery。

以下应该工作：

jQuery('.title').slideToggle();

您不应该在Angular中使用jQuery。尽管有可能（请参见其他答案），但不建议这样做。为什么？

Angular在其内存中拥有DOM自己的表示形式，并且不使用document.getElementById(id)jQuery之类的查询选择器（诸如之类的函数）。相反，所有DOM操作都由Renderer2（以及在背景/框架代码中访问该Renderer2的Angular指令，例如* ngFor和* ngIf）完成。如果您自己使用jQuery操作DOM，那么您迟早会...

1. 遇到同步问题，并在正确的时间从屏幕上出现错误或不消失的情况
2. 由于Angular的内部DOM表示绑定到zone.js及其更改检测机制，因此在更复杂的组件中会遇到性能问题-因此手动更新DOM总是会阻止您的应用程序在其上运行的线程。
3. 还有其他您不知道其来源的令人困惑的错误。
4. 无法正确测试应用程序（Jasmine要求您知道何时呈现元素）
5. 无法使用Angular Universal或WebWorkers

如果您真的想包括jQuery（用于将您将百分百扔掉的原型原型带走），我建议至少将它包含在package.json中，npm install --save jquery而不是从Google的CDN中获取它。

TLDR：要学习如何以Angular的方式操作DOM，请首先阅读官方的英雄巡回教程：https : //angular.io/tutorial/toh-pt2如果您需要访问DOM层次结构中较高的元素（父母或document body）或其他一些原因的指示一样*ngIf，*ngFor定制指令，管道等角度实用工具，比如[style.background]，[class.myOwnCustomClass] 不能满足您的需求，使用Renderer2：https://www.concretepage.com/angular-2/angular-4 -renderer2-example

试试这个：

import * as $ from 'jquery/dist/jquery.min.js';

或将脚本添加到angular-cli.json：

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

并在您的.ts文件中：

declare var $: any;

您可以像这样更新您的jquery类型

npm install --save @types/jquery@latest

我也有同样的错误，我已经花了5天的时间在网上冲浪寻找解决方案。它对我有用，对您也应该有用

如果您需要在项目（typescript）中使用其他库，而不仅仅是在项目（angle）中使用，则可以查找tds的（TypeScript声明文件），这些tds都很简单，并且具有方法，类型，函数等信息， TypeScript可以使用它，通常不需要导入。声明var是最后一个资源

npm install @types/lib-name --save-dev

您可以使用webpack来提供它。然后将自动注入DOM。

module.exports = {
  context: process.cwd(),
  entry: {
    something: [
      path.join(root, 'src/something.ts')
    ],
    vendor: ['jquery']
  },
  devtool: 'source-map',
  output: {
    path: path.join(root, '/dist/js'),
    sourceMapFilename: "[name].js.map",
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader'}
    ]
  },
  resolve: {
    extensions: ['.ts', '.es6', '.js', '.json']
  },
  plugins: [

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),

  ]
};

尝试使用-声明let $：any;

或从'jquery / dist / jquery.min.js'导入*作为$; 提供lib的确切路径

打字稿的解决方案：

步骤1：

npm install jquery

npm install --save-dev @types/jquery

步骤2：在Angular.json中添加：

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

或在index.html中添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

第三步：在* .component.ts中你想使用jQuery的地方

import * as $ from 'jquery';  // dont need "declare let $"

然后，您可以使用与javaScript相同的jquery。这样，VScode支持通过Typescript自动建议

ngOnInit() {
     const $ = window["$"];
     $('.flexslider').flexslider({
        animation: 'slide',
        start: function (slider) {
          $('body').removeClass('loading')
        }
     })
}