如何使用Angular的jQuery？
任何人都可以告诉我，如何使用Angular的 jQuery ？
class MyComponent { constructor() { // how to query the DOM element from here? } } 我知道有一些解决方法，比如先操纵DOM元素的类或者id ，但是我希望能有一个更干净的方法来实现它。
与ng1相比，使用Angular2中的jQuery是一件轻而易举的事情。 如果你使用的是TypeScript，你可以先引用jQuery的typescript定义。
tsd install jquery --save or typings install dt~jquery --global --save
TypescriptDefinitions不是必需的，因为你可以使用anytypes的$或jQuery
在你的angular度组件中，你应该使用@ViewChild()从模板中引用一个DOM元素在视图初始化之后，你可以使用这个对象的nativeElement属性并传递给jQuery。
声明$ （或jQuery ）为JQueryStatic会给你一个对jQuery的types化引用。
import {bootstrap} from '@angular/platform-browser-dynamic'; import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core'; declare var $:JQueryStatic; @Component({ selector: 'ng-chosen', template: `<select #selectElem> <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option> </select> <h4> {{selectedValue}}</h4>` }) export class NgChosenComponent implements AfterViewInit { @ViewChild('selectElem') el:ElementRef; items = ['First', 'Second', 'Third']; selectedValue = 'Second'; ngAfterViewInit() { $(this.el.nativeElement) .chosen() .on('change', (e, args) => { this.selectedValue = args.selected; }); } } bootstrap(NgChosenComponent);
这个例子在plunker上可用： http ://plnkr.co/edit/Nq9LnK?p=preview
tslint会抱怨chosen不是$上的属性，要解决这个问题，你可以添加一个定义到你的自定义* .d.ts文件中的JQuery接口
interface JQuery { chosen(options?:any):JQuery; }
为什么每个人都把它变成火箭科学？ 对于任何需要在静态元素上做一些基本的东西的人，例如body标签，就这样做：
- 在index.html中添加
script标记的path到您的jQuery的lib，无所谓在哪里（这样你也可以使用IE条件标签加载较低版本的jQuery的IE9和更less）。 - 在
export component块中有一个调用你的代码的函数：$("body").addClass("done");通常这会导致声明错误，所以在这个.ts文件的所有导入之后，添加declare var $:any;你很好走！
这是为我工作。
第一步 – 首先要做的事情
// In the console // First install jQuery npm install --save jquery // and jQuery Definition npm install -D @types/jquery
第2步 – 导入
// Now, within any of the app files (ES2015 style) import * as $ from 'jquery'; // $('#elemId').width(); // OR // CommonJS style - working with "require" import $ = require('jquery') // $('#elemId').width();
#UPDATE Feb - 2017年Feb - 2017
最近，我正在用ES6编写代码，而不是typescript并且能够在import statement无* as $ import statement 。 这就是现在的样子：
import $ from 'jquery'; // $('#elemId').width();
祝你好运。
现在已经变得非常简单了，你可以通过在Angular2控制器中简单地声明任何types的jQueryvariables。
declare var jQuery:any;
在导入语句之后和组件装饰器之前添加。
要访问任何具有ID X或X类的元素，你只需要做
jQuery("#X or .X").someFunc();
请按照这些简单的步骤。 它为我工作。 让我们开始一个新的angular2应用程序，以避免任何混淆。 我正在使用Angular cli。 所以，如果你还没有安装它。 https://cli.angular.io/
第1步：创build一个演示angular2应用程序
ng new jquery-demo
你可以使用任何名字。 现在通过运行下面的cmd来检查它是否工作（现在，如果不使用cd命令，确保你指向'jquery-demo'）
ng serve
你会看到“应用程序的作品！” 在浏览器上。
第2步：安装Bower（networking包pipe理器）
在cli上运行这个命令（如果不使用cd命令，确保你指向'jquery-demo'）：
npm i -g bower --save
现在，在成功安装bower后，使用以下命令创build一个“bower.json”文件：
bower init
它会要求input，如果你想要默认值，只要按下回车键就可以了;如果你要的是默认值，最后input“是”。
现在，您可以在文件夹“jquery-demo”中看到一个新文件（bower.json）。 您可以在https://bower.io/上find更多信息;
第3步：安装jquery
运行这个命令
bower install jquery --save
它将创build一个新的文件夹（bower_components），其中将包含jquery安装文件夹。 现在你已经在'bower_components'文件夹中安装了jquery。
第4步：在'angular-cli.json'文件中添加jquery位置
打开“angular-cli.json”文件（存在于“jquery-demo”文件夹中）并在“scripts”中添加jquery位置。 它看起来像这样：
"scripts": ["../bower_components/jquery/dist/jquery.min.js" ]
第5步：编写简单的jQuery代码进行testing
打开“app.component.html”文件并添加一个简单的代码行，该文件将如下所示：
<h1> {{title}} </h1> <p>If you click on me, I will disappear.</p>
现在打开“app.component.ts”文件并添加jqueryvariables声明和代码“p”标记。 你也应该使用生命周期hook ngAfterViewInit（）。 进行更改后，文件将如下所示：
import { Component, AfterViewInit } from '@angular/core'; declare var $:any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; ngAfterViewInit(){ $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); } }
现在使用'ng serve'命令运行你的angular 2应用程序并testing它。 它应该工作。
你可以实现生命周期hook ngAfterViewInit（）来添加一些DOM操作
ngAfterViewInit() { var el:any = elelemtRef.domElement.children[0]; $(el).chosen().on('change', (e, args) => { _this.selectedValue = args.selected; }); }
使用路由器时要小心，因为angular2可能会重新使用视图。因此，您必须确保DOM元素操作仅在afterViewInit的第一次调用中完成。（您可以使用静态布尔variables来执行操作）
class Component { let static chosenInitialized : boolean = false; ngAfterViewInit() { if (!Component.chosenInitialized) { var el:any = elelemtRef.domElement.children[0]; $(el).chosen().on('change', (e, args) => { _this.selectedValue = args.selected; }); Component.chosenInitialized = true; } } }
我以更简单的方式做到这一点 – 首先在控制台中安装npm： npm install jquery -S ，然后在组件文件中，我只写： let $ = require('.../jquery.min.js') ，它工作正常！ 在这里从我的一些代码完整的例子：
import { Component, Input, ElementRef, OnInit } from '@angular/core'; let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js'); @Component({ selector: 'departments-connections-graph', templateUrl: './departmentsConnectionsGraph.template.html', }) export class DepartmentsConnectionsGraph implements OnInit { rootNode : any; container: any; constructor(rootNode: ElementRef) { this.rootNode = rootNode; } ngOnInit() { this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0]; console.log({ container : this.container}); ... } }
在teplate我有例如：
<div class="departments-connections-graph">something...</div>
编辑
或者不使用：
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');
使用
declare var $: any;
并在您的index.html放：
<script src="assets/js/jquery-2.1.1.js"></script>
这将初始化jquery只有一次globaly – 这是重要的例如在自举中使用模态窗口…
//安装jquery npm install jquery --save
//安装typings install dt~jquery --global --savetypes定义typings install dt~jquery --global --save
//将jquery库添加到构buildconfiguration文件（在“angular-cli-build.js”文件中）
vendorNpmFiles: [ ......... ......... 'jquery/dist/jquery.min.js' ]
//运行构build以在构build版本中添加jquery库
//添加相对pathconfiguration（在system-config.js中） /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' }; /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };
/** User packages configuration. */ const packages: any = { ......, 'jquery':{ main: 'jquery.min', format: 'global', defaultExtension: 'js'}};
//在你的组件文件中导入jQuery库
import 'jquery';
下面是我的示例组件的代码snipppet
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(){} }
一个简单的方法：
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;"; }
在Angular2中使用jquery（4）
按照这些设置
安装Jquery和Juqrytypes的定义
对于npm install jquery --save安装npm install jquery --save
对于Jquerytypes定义安装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 }
由于我是笨蛋，我认为这将是一件好事，有一些工作代码。
此外， angular度量angular器的 Angular2types版本与jQuery $ 有问题 ，所以顶部接受的答案不给我一个干净的编译。
以下是我要工作的步骤：
的index.html
<head> ... <script src="jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> ... </head>
在my.component.ts里面
import { Component, EventEmitter, Input, OnInit, Output, NgZone, AfterContentChecked, ElementRef, ViewChild } from "@angular/core"; import {Router} from "@angular/router"; declare var jQuery:any; @Component({ moduleId: module.id, selector: 'mycomponent', templateUrl: 'my.component.html', styleUrls: ['../../scss/my.component.css'], }) export class MyComponent implements OnInit, AfterContentChecked{ ... scrollLeft() { jQuery('#myElement').animate({scrollLeft: 100}, 500); } }
只写
声明var $：any; 毕竟导入部分，你可以使用jquery，并在index.html页面中包含jquery库
它适用于我
如果你使用angular-cli，你可以这样做：
-
安装依赖项 ：
npm安装jquery –save
npm install @ types / jquery –save-dev
-
导入文件 ：
将“../node_modules/jquery/dist/jquery.min.js”添加到.angular-cli.json文件中的“脚本”部分
-
声明jquery ：
将“$”添加到tsconfig.app.json的“types”部分
你可以在官方的angular度cli doc上find更多的细节
1）访问组件中的DOM。
import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter'; constructor(el: ElementRef,public zone:NgZone) { this.el = el.nativeElement; this.dom = new BrowserDomAdapter(); } ngOnInit() { this.dom.setValue(this.el,"Adding some content from ngOnInit"); }
您可以按照以下方式包含jQuery。 2）在angular2加载之前，将你的jquery文件包含在index.html中
<head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- jquery file --> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/jquery-ui.js"></script> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>
你可以用下面的方式使用Jquery，在这里我使用JQuery Uidateselect器。
import { Directive, ElementRef} from '@angular/core'; declare var $:any; @Directive({ selector: '[uiDatePicker]', }) export class UiDatePickerDirective { private el: HTMLElement; constructor(el: ElementRef) { this.el = el.nativeElement; } ngOnInit() { $(this.el).datepicker({ onSelect: function(dateText:string) { //do something on select } }); } }
这为我工作。
第1步：使用命令：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')); } }
我find的最有效的方法是在页面/组件构造函数中使用setTimeout，时间为0。 这让我们在Angular完成加载所有子组件后的下一个执行周期中运行jQuery。 可以使用其他一些组件方法，但是我所尝试的所有方法都是在setTimeout中运行时最好的。
export class HomePage { constructor() { setTimeout(() => { // run jQuery stuff here }, 0); } }
这是什么对我来说 – Angular 2与webpack
我试图声明$为anytypes，但每当我试图使用任何JQuery模块，我得到（例如） $(..).datepicker()不是一个函数
由于我的vendor.ts文件中包含了jquery，我只是简单地将它导入到我的组件中
import * as $ from 'jquery';
我现在可以使用Jquery插件（如bootstrap-datetimepicker）
您也可以尝试使用“InjectionToken”导入它。 如下所述： 在没有types定义的情况下在Angular / Typescript中使用jQuery
你可以简单地注入jQuery全局实例并使用它。 为此，您将不需要任何types定义或types。
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(); } }
