有人能告诉我,如何在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,但我希望有一种更干净的方式来做到这一点。
当前回答
我发现的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。这会让jQuery在Angular加载完所有子组件后的下一个执行周期中运行。其他一些组件方法也可以使用,但我所尝试的最好的工作时运行在一个setTimeout。
export class HomePage {
constructor() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}
其他回答
如何在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
}
一个简单的方法:
1. 包括脚本
index . html
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
2. 声明
my.component.ts
declare var $: any;
3.使用
@Component({
selector: 'home',
templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
...
$("#myselector").style="display: none;";
}
其他人已经发帖了。但我在这里举一个简单的例子,这样可以帮助到一些新人。
步骤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一起工作
在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;你就可以开始了!