有人能告诉我,如何在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,但我希望有一种更干净的方式来做到这一点。
当前回答
其他人已经发帖了。但我在这里举一个简单的例子,这样可以帮助到一些新人。
步骤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安装jquery NPM install @types/jquery 导入文件: 在.angular-cli的“script”部分添加“../node_modules/jquery/dist/jquery.min.js”。json文件 jquery: 在tsconfig.app.json的“types”部分添加“$”
你可以在angular cli官方文档中找到更多细节
因为我是一个笨蛋,我认为有一些工作代码会很好。
此外,Angular2类型版本的角量角器与jQuery $有问题,所以顶部接受的答案没有给我一个干净的编译。
以下是我开始工作的步骤:
index . html
<head>
...
<script src="https://code.jquery.com/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);
}
}
现在它变得非常简单,你可以通过在Angular2控制器中声明任意类型的jQuery变量来实现。
declare var jQuery:any;
将其添加在import语句之后和组件装饰符之前。
要访问任何id为X或类为X的元素,你只需要这样做
jQuery("#X or .X").someFunc();
我跳过jquery的安装,因为在我之前创建的所有帖子中都提到了这一点。因此,您已经安装了jquery。像这样将t导入组件
import * as $ from 'jquery';
将工作,但还有另一种“angular”的方式来做到这一点,即创建一个服务。
一步不。1:创建jquery.service.ts文件。
// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');
的一步。不。2:在app.module.ts中注册服务
import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;
providers: [
{ provide: JQUERY_TOKEN, useValue: jQuery },
]
一步不。3:将服务注入到组件my-super-duper.component.ts中
import { Component, Inject } from '@angular/core';
export class MySuperDuperComponent {
constructor(@Inject(JQUERY_TOKEN) private $: any) {}
someEventHandler() {
this.$('#my-element').css('display', 'none');
}
}
如果有人能解释这两种方法的优缺点,我将非常感激:DI jquery as a service vs. import * as $ from 'jquery';
与ng1相比,在Angular2中使用jQuery非常简单。如果你使用的是TypeScript,你可以先引用jQuery TypeScript定义。
tsd install jquery --save
or
typings install dt~jquery --global --save
TypescriptDefinitions不是必需的,因为你可以使用任何类型作为$或jQuery的类型
在你的angular组件中,你应该使用@ViewChild()从模板中引用一个DOM元素,在视图初始化后,你可以使用该对象的nativeElement属性并将其传递给jQuery。
将$(或jQuery)声明为querystatic将为您提供对jQuery的类型化引用。
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会抱怨选择不是$上的属性,为了解决这个问题,你可以在自定义的*.d中添加一个定义到JQuery接口。ts文件
interface JQuery {
chosen(options?:any):JQuery;
}