有人能告诉我,如何在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,但我希望有一种更干净的方式来做到这一点。
当前回答
只写
declare var $:any;
在所有导入部分之后,你可以使用jQuery并在index.html页面中包含jQuery库
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
这对我很有效
其他回答
如何在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
}
你也可以尝试用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();
}
}
第一步:使用命令:NPM install jquery——save
步骤2:你可以简单地导入angular:
从jquery中导入$;
就这些。
一个例子是:
import { Component } from '@angular/core';
import $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(){
console.log($('body'));
}
}
安装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";
下面是对我有用的——带webpack的Angular 2
我尝试将$声明为任何类型,但每当我尝试使用任何JQuery模块时,我都会得到(例如)$(..).datepicker()不是一个函数
因为我有Jquery包含在我的供应商。ts文件,我只是将它导入到我的组件使用
Import * as $ from jquery;
我现在能够使用Jquery插件(如bootstrap-datetimepicker)