如何在Angular中使用jQuery ?

有人能告诉我，如何在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>

这对我很有效

2016-10-15 11:20:53

其他回答

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

为什么每个人都把它搞得很复杂? 对于任何需要在静态元素上做一些基本的事情的人，例如，body标签，只需这样做:

在index.html中添加带有你的jquery库路径的script标签，不管在哪里(这样你也可以使用IE条件标签来加载IE9或更低版本的jquery)。在导出组件块中有一个调用代码的函数:$("body").addClass("done");通常这会导致声明错误，所以在.ts文件中的所有导入之后，添加declare var $:any;你就可以开始了!

2016-07-07 12:58:29

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

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

2016-04-06 13:56:31

第一步:使用命令: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'));
  }


}

2017-10-09 11:55:22

现在它变得非常简单，你可以通过在Angular2控制器中声明任意类型的jQuery变量来实现。

declare var jQuery:any;

将其添加在import语句之后和组件装饰符之前。

要访问任何id为X或类为X的元素，你只需要这样做

jQuery("#X or .X").someFunc();

2016-07-08 16:41:15

如何在Angular中使用jQuery ?

推荐文章

最新文章

标签