如何在Angular中使用jQuery ?

有人能告诉我，如何在Angular中使用jQuery吗?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

我知道有一些变通办法，比如在前面操纵DOM元素的类或id，但我希望有一种更干净的方式来做到这一点。

当前回答

我跳过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';

2018-04-21 21:14:54

其他回答

你也可以尝试用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();
    }
}

2017-05-16 14:54:56

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 Ui日期选择器。

    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
         }
        });
    }
}

这对我很有用。

2016-06-07 13:16:49

我发现的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。这会让jQuery在Angular加载完所有子组件后的下一个执行周期中运行。其他一些组件方法也可以使用，但我所尝试的最好的工作时运行在一个setTimeout。

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

2016-04-06 13:56:31

其他人已经发帖了。但我在这里举一个简单的例子，这样可以帮助到一些新人。

步骤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一起工作

2019-05-06 21:30:28

全球库安装作为正式文档在这里

从npm安装: NPM安装jquery 在脚本中添加所需的脚本文件: “脚本”:( “node_modules / jquery / dist / jquery.slim.js” ),

重启服务器，如果你正在运行它，它应该工作在你的应用程序。

如果你想使用内部单个组件使用import $ from 'jquery';在组件内部

2018-09-30 12:22:23

如何在Angular中使用jQuery ?

推荐文章

最新文章

标签