有人能告诉我,如何在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'));
}
}
其他回答
我发现的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。这会让jQuery在Angular加载完所有子组件后的下一个执行周期中运行。其他一些组件方法也可以使用,但我所尝试的最好的工作时运行在一个setTimeout。
export class HomePage {
constructor() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}
请遵循这些简单的步骤。这对我很管用。为了避免混淆,让我们从一个新的angular 2应用开始。我使用的是Angular cli。因此,如果您还没有安装它,请安装它。 https://cli.angular.io/
步骤1:创建一个演示angular 2应用程序
ng new jquery-demo
您可以使用任何名称。现在通过在cmd下运行检查它是否正在工作。(现在,如果不使用cd命令,请确保您指向'jquery-demo')
ng serve
你会在浏览器上看到“app works!”
步骤2:安装Bower (web包管理器)
在cli下运行这个命令(如果不使用cd命令,请确保你指向的是'jquery-demo'):
npm i -g bower --save
现在在成功安装凉亭后,创建一个“凉亭”。Json文件,使用以下命令:
bower init
它会要求输入,如果你想要默认值,只需要按enter键,最后输入“Yes”,当它会问“看起来不错吗?”
现在你可以在"jquery-demo"文件夹中看到一个新文件(bower.json)。你可以在https://bower.io/上找到更多信息
步骤3:安装jquery
执行此命令
bower install jquery --save
它将创建一个新文件夹(bower_components),其中包含jquery安装文件夹。现在你已经在“bower_components”文件夹中安装了jquery。
第四步:在angular-cli中添加jquery location。json的文件
“angular-cli开放。Json文件(目前在'jquery-demo'文件夹),并在“脚本”中添加jquery位置。它看起来是这样的:
"scripts": ["../bower_components/jquery/dist/jquery.min.js"
]
步骤5:编写简单的jquery代码进行测试
打开'app.component.html'文件,并添加一个简单的代码行,该文件看起来像这样:
<h1>
{{title}}
</h1>
<p>If you click on me, I will disappear.</p>
现在打开'app.component.ts'文件,并添加jquery变量声明和'p'标签的代码。你也应该使用生命周期钩子ngAfterViewInit()。修改后的文件看起来是这样的:
import { Component, AfterViewInit } from '@angular/core';
declare var $:any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
ngAfterViewInit(){
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
}
}
现在使用'ng serve'命令运行你的angular 2应用并测试它。它应该会起作用。
下面是对我有用的——带webpack的Angular 2
我尝试将$声明为任何类型,但每当我尝试使用任何JQuery模块时,我都会得到(例如)$(..).datepicker()不是一个函数
因为我有Jquery包含在我的供应商。ts文件,我只是将它导入到我的组件使用
Import * as $ from jquery;
我现在能够使用Jquery插件(如bootstrap-datetimepicker)
你可以实现生命周期钩子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;
}
}
}
只写
declare var $:any;
在所有导入部分之后,你可以使用jQuery并在index.html页面中包含jQuery库
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
这对我很有效