有人能告诉我,如何在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,但我希望有一种更干净的方式来做到这一点。
当前回答
下面是对我有用的——带webpack的Angular 2
我尝试将$声明为任何类型,但每当我尝试使用任何JQuery模块时,我都会得到(例如)$(..).datepicker()不是一个函数
因为我有Jquery包含在我的供应商。ts文件,我只是将它导入到我的组件使用
Import * as $ from jquery;
我现在能够使用Jquery插件(如bootstrap-datetimepicker)
其他回答
只写
declare var $:any;
在所有导入部分之后,你可以使用jQuery并在index.html页面中包含jQuery库
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
这对我很有效
角12
NPM jquery
这很重要:NPM I @types/jquery
angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]
.ts文件
import * as $ from "jquery";
其他人已经发帖了。但我在这里举一个简单的例子,这样可以帮助到一些新人。
步骤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一起工作
一个简单的方法:
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;";
}
全球库安装作为正式文档在这里
从npm安装: NPM安装jquery 在脚本中添加所需的脚本文件: “脚本”:( “node_modules / jquery / dist / jquery.slim.js” ),
重启服务器,如果你正在运行它,它应该工作在你的应用程序。
如果你想使用内部单个组件使用import $ from 'jquery';在组件内部