有人能告诉我,如何在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)
其他回答
你也可以尝试用InjectionToken导入它。 如下所述:在Angular/Typescript中使用jQuery而不使用类型定义
可以简单地注入jQuery全局实例并使用它。为此,您不需要任何类型定义或类型。
import { InjectionToken } from '@angular/core';
export const JQ_TOKEN = new InjectionToken('jQuery');
export function jQueryFactory() {
return window['jQuery'];
}
export const JQUERY_PROVIDER = [
{ provide: JQ_TOKEN, useFactory: jQueryFactory },
];
当在app.module.ts中正确设置时:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { JQ_TOKEN } from './jQuery.service';
declare let jQuery: Object;
@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
providers: [
{ provide: JQ_TOKEN, useValue: jQuery }
],
bootstrap: [AppComponent]
})
export class AppModule { }
你可以在你的组件中使用它:
import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';
@Component({
selector: "selector",
templateUrl: 'somefile.html'
})
export class SomeComponent {
constructor( @Inject(JQ_TOKEN) private $: any) { }
somefunction() {
this.$('...').doSomething();
}
}
//install jquery——保存
//安装类型定义为jquery类型安装dt~jquery——global——保存
//添加jquery库到build配置文件中(在"angular-cli-build.js"文件中)
vendorNpmFiles: [
.........
.........
'jquery/dist/jquery.min.js'
]
//运行build将jquery库添加到build ng build中
//添加相对路径配置(在system-config.js中) /**映射相对路径到url。* / Const map: any = { …, ……, “jquery”:“供应商/ jquery / dist” };
/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};
在你的组件文件中导入jquery库
import 'jquery';
下面是示例组件的代码片段
import { Component } from '@angular/core';
import 'jquery';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
list:Array<number> = [90,98,56,90];
title = 'app works!';
isNumber:boolean = jQuery.isNumeric(89)
constructor(){}
}
首先,使用npm安装jQuery,如下所示:
npm install jquery — save
其次,进入。/angular-cli。在你的Angular CLI项目文件夹的根目录下找到script:[]属性,并包括jQuery的路径,如下所示:
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
现在,要使用jQuery,您所要做的就是将它导入您想要使用jQuery的任何组件中。
import * as $ from 'jquery';
(or)
declare var $: any;
看看下面使用jQuery在点击时动画div的代码,特别是在第二行。我们正在从jQuery导入所有的$。
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Look jQuery Animation working in action!';
public ngOnInit()
{
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '5em'}, "slow");
});
});
}
}
一个简单的方法:
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;";
}
安装jquery
jquery . jquery . Terminal$ npm
(bootstrap 4…)
终端$ npm安装popper.js
终端$ npm安装引导
然后将import语句添加到app.module.ts中。
import 'jquery'
(bootstrap 4…)
import 'popper.js'
import 'bootstrap'
现在您将不再需要<SCRIPT>标记来引用JavaScript。
(任何你想要使用的CSS仍然必须在styles.css中引用)
@import "~bootstrap/dist/css/bootstrap.min.css";