有人能告诉我,如何在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,但我希望有一种更干净的方式来做到这一点。
当前回答
在src/Main中添加下面的代码。Ts将重要的jquery和所有的功能在所有的项目
import * as jquery from 'jquery';
import * as bootstrap from 'bootstrap';
不要忘记NPM I @types/jquery和NPM I @types/bootstrap
其他回答
角12
NPM jquery
这很重要:NPM I @types/jquery
angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]
.ts文件
import * as $ from "jquery";
如果你使用angular-cli,你可以:
安装依赖项: NPM安装jquery NPM install @types/jquery 导入文件: 在.angular-cli的“script”部分添加“../node_modules/jquery/dist/jquery.min.js”。json文件 jquery: 在tsconfig.app.json的“types”部分添加“$”
你可以在angular cli官方文档中找到更多细节
其他人已经发帖了。但我在这里举一个简单的例子,这样可以帮助到一些新人。
步骤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一起工作
使用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');
}
全球库安装作为正式文档在这里
从npm安装: NPM安装jquery 在脚本中添加所需的脚本文件: “脚本”:( “node_modules / jquery / dist / jquery.slim.js” ),
重启服务器,如果你正在运行它,它应该工作在你的应用程序。
如果你想使用内部单个组件使用import $ from 'jquery';在组件内部