how to use jquery in angular 2?

2020-04-11 03:15发布

问题:

I know if i I need to use 3rd party library in angular 1.3 or 1.4 .I need to make directive of that thing and use that in our project .Now I am using angular 2.0 .I want to make this in angular 2 https://jqueryui.com/autocomplete/ or this https://jsfiddle.net/2rgrmv4q/

can I use jquery in angular2.

1.How I will use 3rd party library in angular.

2.How I make auto complete of jquery in angular 2.

here is my code http://plnkr.co/edit/BxMcNXLjVOJBAIiBGL5Y?p=preview

// Code goes here

import {Component,View} from 'angular2/core';
@Component({
  selector:'my-app'
  templateUrl: 'home/home.html',
})
export class AppComponent {
  constructor() { }
 } 

回答1:

You just need to declare one variable and put values or initilize that variable with the values that your required. in the constructor you have to define Jquery part . take a look at this.Here is working example for Autocomplete which is required to you

http://plnkr.co/edit/dAMQc0EN6rSS4dEuTR7E?p=preview

Just put this code into the constructor :

export class AppComponent { 
  availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",...
    ];
  constructor(){
    $( "#tags" ).autocomplete({
      source: this.availableTags
    });
  }
}


回答2:

If you don't care about jQuery typings, you can just declare $:

import {Component, ElementRef,Directive, EventEmitter,Output} from 'angular2/core';

declare var $: any;

If you're looking for typings, you can follow this post:

using jQuery globaly within angular 2 application