有人能告诉我,如何在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安装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中使用模态窗口很重要…
其他回答
这对我来说很管用。
第一步——重要的事情先做
// 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();
祝你好运。
你可以实现生命周期钩子ngAfterViewInit()来添加一些DOM操作
ngAfterViewInit() {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on('change', (e, args) => {
_this.selectedValue = args.selected;
});
}
使用路由器时要小心,因为angular2可能会回收视图。所以你必须确保DOM元素的操作只在afterViewInit的第一次调用中完成。(你可以使用静态布尔变量来实现)
class Component {
let static chosenInitialized : boolean = false;
ngAfterViewInit() {
if (!Component.chosenInitialized) {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on('change', (e, args) => {
_this.selectedValue = args.selected;
});
Component.chosenInitialized = true;
}
}
}
使用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');
}
在src/Main中添加下面的代码。Ts将重要的jquery和所有的功能在所有的项目
import * as jquery from 'jquery';
import * as bootstrap from 'bootstrap';
不要忘记NPM I @types/jquery和NPM I @types/bootstrap
为什么每个人都把它搞得很复杂? 对于任何需要在静态元素上做一些基本的事情的人,例如,body标签,只需这样做:
在index.html中添加带有你的jquery库路径的script标签,不管在哪里(这样你也可以使用IE条件标签来加载IE9或更低版本的jquery)。 在导出组件块中有一个调用代码的函数:$("body").addClass("done");通常这会导致声明错误,所以在.ts文件中的所有导入之后,添加declare var $:any;你就可以开始了!