如何在Angular中使用jQuery ?

有人能告诉我，如何在Angular中使用jQuery吗?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

我知道有一些变通办法，比如在前面操纵DOM元素的类或id，但我希望有一种更干净的方式来做到这一点。

当前回答

其他人已经发帖了。但我在这里举一个简单的例子，这样可以帮助到一些新人。

步骤1:在index.html文件中引用jquery cdn

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

步骤2:假设我们想在点击按钮时显示或隐藏div:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

步骤3:在下面的组件文件中，import声明$如下所示:

declare var $: any;

然后创建如下函数:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

它将与最新的Angular和JQuery一起工作

2019-05-06 21:30:28

其他回答

如何在Angular2中使用Jquery

遵循以下步骤

安装Jquery和Juqry类型定义

Jquery安装npm install Jquery—save

Jquery类型定义安装npm install @types/ Jquery——save-dev

然后简单的导入jquery

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

2017-06-09 14:52:36

这对我来说很管用。

第一步——重要的事情先做

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

步骤2 -导入

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#更新- 2017年2月

最近，我正在用ES6而不是typescript编写代码，并且能够在导入语句中不使用*作为$导入。这是它现在的样子:

import $ from 'jquery';
//
$('#elemId').width();

祝你好运。

2016-11-01 07:22:56

现在它变得非常简单，你可以通过在Angular2控制器中声明任意类型的jQuery变量来实现。

declare var jQuery:any;

将其添加在import语句之后和组件装饰符之前。

要访问任何id为X或类为X的元素，你只需要这样做

jQuery("#X or .X").someFunc();

2016-07-08 16:41:15

下面是对我有用的——带webpack的Angular 2

我尝试将$声明为任何类型，但每当我尝试使用任何JQuery模块时，我都会得到(例如)$(..).datepicker()不是一个函数

因为我有Jquery包含在我的供应商。ts文件，我只是将它导入到我的组件使用

Import * as $ from jquery;

我现在能够使用Jquery插件(如bootstrap-datetimepicker)

2017-05-03 07:05:30

1)在组件中访问DOM。

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

你可以通过以下方式来包含jQuery。 2)在angular2加载之前将jquery文件包含在index.html中

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

你可以使用Jquery在以下方式，这里我使用Jquery Ui日期选择器。

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

这对我很有用。

2016-06-07 13:16:49

如何在Angular中使用jQuery ?

推荐文章

最新文章

标签