有人能告诉我,如何在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,但我希望有一种更干净的方式来做到这一点。
当前回答
因为我是一个笨蛋,我认为有一些工作代码会很好。
此外,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);
}
}
其他回答
我发现的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。这会让jQuery在Angular加载完所有子组件后的下一个执行周期中运行。其他一些组件方法也可以使用,但我所尝试的最好的工作时运行在一个setTimeout。
export class HomePage {
constructor() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}
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
}
});
}
}
这对我很有用。
我用更简单的方法——首先在控制台通过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中使用模态窗口很重要…
下面是对我有用的——带webpack的Angular 2
我尝试将$声明为任何类型,但每当我尝试使用任何JQuery模块时,我都会得到(例如)$(..).datepicker()不是一个函数
因为我有Jquery包含在我的供应商。ts文件,我只是将它导入到我的组件使用
Import * as $ from jquery;
我现在能够使用Jquery插件(如bootstrap-datetimepicker)
这对我来说很管用。
第一步——重要的事情先做
// 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();
祝你好运。