如何在Angular中使用jQuery ?

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

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

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

当前回答

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

declare var jQuery:any;

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

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

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

2016-07-08 16:41:15

其他回答

我用更简单的方法——首先在控制台通过npm安装jquery: npm install jquery - s，然后在组件文件中我只写:let $ = require('…/jquery.min.js')，它就工作了!以下是我的一些代码的完整示例:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

在模板我有例如:

<div class="departments-connections-graph">something...</div>

EDIT

代替使用:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

use

declare var $: any;

在index.html中输入:

<script src="assets/js/jquery-2.1.1.js"></script>

这将只初始化jquery一次全局-这对于在bootstrap中使用模态窗口很重要…

2016-06-29 12:37:25

如何在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

因为我是一个笨蛋，我认为有一些工作代码会很好。

此外，Angular2类型版本的角量角器与jQuery $有问题，所以顶部接受的答案没有给我一个干净的编译。

以下是我开始工作的步骤:

index . html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

内部my.component.ts

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

2016-10-03 22:39:45

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

步骤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

使用Angular Cli

 npm install jquery --save

在角。脚本下的Json数组

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

现在要使用jQuery，您所要做的就是将它导入到您想要使用jQuery的任何组件中。

例如在根组件中导入和使用jQuery

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

2019-04-28 06:19:15

如何在Angular中使用jQuery ?

推荐文章

最新文章

标签