有人能告诉我,如何在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,但我希望有一种更干净的方式来做到这一点。
当前回答
你也可以尝试用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();
}
}
其他回答
为什么每个人都把它搞得很复杂? 对于任何需要在静态元素上做一些基本的事情的人,例如,body标签,只需这样做:
在index.html中添加带有你的jquery库路径的script标签,不管在哪里(这样你也可以使用IE条件标签来加载IE9或更低版本的jquery)。 在导出组件块中有一个调用代码的函数:$("body").addClass("done");通常这会导致声明错误,所以在.ts文件中的所有导入之后,添加declare var $:any;你就可以开始了!
你也可以尝试用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(){}
}
只写
declare var $:any;
在所有导入部分之后,你可以使用jQuery并在index.html页面中包含jQuery库
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
这对我很有效
在src/Main中添加下面的代码。Ts将重要的jquery和所有的功能在所有的项目
import * as jquery from 'jquery';
import * as bootstrap from 'bootstrap';
不要忘记NPM I @types/jquery和NPM I @types/bootstrap