如何在Angular 4中使用jQuery插件？-Java 学习之路

我想在角度项目中使用范围滑块，我尝试使用一个可用的角度4模块 .

它在编译期间工作正常，但是当我尝试构建它以进行部署时，它会抛出以下错误 .

enter image description here

我检查了在角度项目中直接使用jQuery插件的选项，我只是在Angular 2中获得选项 .

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

请告诉我 .

提前致谢！

11 回答

是的，您可以在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 = 'abgular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

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

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

这对你有用 . 谢谢

回复于 2024-04-25T02:59:05+08:00

用npm安装jquery

npm install jquery --save

添加打字

npm install --save-dev @types/jquery

将脚本添加到angular-cli.json

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

Build 项目和服务

ng build

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

回复于 2024-04-25T02:59:05+08:00

使用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');
        });
    }

}

回复于 2024-04-25T02:59:05+08:00

181
在安装@ types / jquery时，不需要声明任何jQuery变量 .
```
declare var jquery:any;   // not required
declare var $ :any;   // not required
```
你应该可以在任何地方访问jQuery .

以下应该有效：
```
jQuery('.title').slideToggle();
```
回复于 2024-04-25T02:59:05+08:00

试试这个：

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

或者向angular-cli.json添加脚本：

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

并在.ts文件中：

declare var $: any;

回复于 2024-04-25T02:59:05+08:00

-3
你不应该在Angular中使用jQuery . 虽然有可能（请参阅此问题的其他答案），但不鼓励这样做 . 为什么？

Angular在其内存中拥有DOM的自己的表示，并且不使用像jQuery这样的查询选择器（像 document.getElementById(id) 这样的函数） . 相反，所有DOM操作都是由Renderer2完成的（和Angular-directives一样，* ngFor和* ngIf在后台/框架代码中访问Renderer2） . 如果你自己用jQuery操作DOM，你迟早会...
- 遇到同步问题，并且在屏幕上的正确时间出现错误或未正确消失
- 在更复杂的组件中存在性能问题，因为Angular的内部DOM表示绑定到zone.js及其更改检测机制 - 因此手动更新DOM将始终阻止运行应用程序的线程 .
- 还有其他令人困惑的错误，你不知道它的起源 .
- 无法正确测试应用程序（Jasmine要求您知道元素何时被渲染）
- 无法使用Angular Universal或WebWorkers
如果你真的想要包含jQuery（用于捕捉一些你将100％最终扔掉的原型），我建议至少将它包含在你的package.json中 npm install --save jquery ，而不是从google的CDN中获取它 .

TLDR：要学习如何以Angular方式操作DOM，请首先浏览官方游览英雄教程：https：//angular.io/tutorial/toh-pt2如果需要访问DOM中更高层的元素层次结构（父或文档正文）或某些其他原因指令，如* ngIf，* ngFor，自定义指令，管道和其他角度实用程序，如[style.background]，[class.myOwnCustomClass]不满足您的需要，使用Renderer2： https://www.concretepage.com/angular-2/angular-4-renderer2-example
回复于 2024-04-25T02:59:05+08:00
139
您可以更新您的jquery类型版本
```
npm install --save @types/jquery@latest
```
我有同样的错误，我曾经在网上冲浪5天寻找解决方案 . 这对我有用，它应该适合你
回复于 2024-04-25T02:59:05+08:00
1
如果您需要在项目中使用其他库--typescript--而不仅仅是在项目中 - 角度 - 您可以查找删除的tds（TypeScript声明文件），它们包含方法，类型，函数等信息，可以由TypeScript使用，通常无需导入 . declare var是最后一个资源
```
npm install @types/lib-name --save-dev
```
回复于 2024-04-25T02:59:05+08:00

您可以使用webpack来 provide 它 . 然后它将自动注入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'
    }),

  ]
};

回复于 2024-04-25T02:59:05+08:00

8

尝试使用 - declare let $：any;

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

回复于 2024-04-25T02:59:05+08:00

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

回复于 2024-04-25T02:59:05+08:00

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

11 回答

相关问题