有人能告诉我,如何在Angular中使用jQuery吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法,比如在前面操纵DOM元素的类或id,但我希望有一种更干净的方式来做到这一点。
有人能告诉我,如何在Angular中使用jQuery吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法,比如在前面操纵DOM元素的类或id,但我希望有一种更干净的方式来做到这一点。
当前回答
第一步:使用命令:NPM install jquery——save
步骤2:你可以简单地导入angular:
从jquery中导入$;
就这些。
一个例子是:
import { Component } from '@angular/core';
import $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(){
console.log($('body'));
}
}
其他回答
如何在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
}
现在它变得非常简单,你可以通过在Angular2控制器中声明任意类型的jQuery变量来实现。
declare var jQuery:any;
将其添加在import语句之后和组件装饰符之前。
要访问任何id为X或类为X的元素,你只需要这样做
jQuery("#X or .X").someFunc();
使用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');
}
首先,使用npm安装jQuery,如下所示:
npm install jquery — save
其次,进入。/angular-cli。在你的Angular CLI项目文件夹的根目录下找到script:[]属性,并包括jQuery的路径,如下所示:
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
现在,要使用jQuery,您所要做的就是将它导入您想要使用jQuery的任何组件中。
import * as $ from 'jquery';
(or)
declare var $: any;
看看下面使用jQuery在点击时动画div的代码,特别是在第二行。我们正在从jQuery导入所有的$。
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Look jQuery Animation working in action!';
public ngOnInit()
{
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '5em'}, "slow");
});
});
}
}
第一步:使用命令:NPM install jquery——save
步骤2:你可以简单地导入angular:
从jquery中导入$;
就这些。
一个例子是:
import { Component } from '@angular/core';
import $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(){
console.log($('body'));
}
}