如何在 Angular 2 中使用 jquery？答案

【问题标题】：how to use jquery in angular 2?如何在 Angular 2 中使用 jquery？
【发布时间】：2016-05-25 07:42:55
【问题描述】：

我知道我是否需要在 angular 1.3 或 1.4 中使用 3rd 方库。我需要对那个东西做出指令并在我们的项目中使用它。现在我正在使用 angular 2.0 .I想在angular 2做这个 https://jqueryui.com/autocomplete/ 或这个 https://jsfiddle.net/2rgrmv4q/

我可以在angular2 中使用jquery。

1.我将如何在 Angular 中使用 3rd 方库。

2.如何在角度 2 中自动完成 jquery。

这是我的代码 http://plnkr.co/edit/BxMcNXLjVOJBAIiBGL5Y?p=preview

// 代码放在这里

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

【问题讨论】：

标签： jquery angular angular2-template

【解决方案1】：

您只需要声明一个变量并输入值或使用您需要的值初始化该变量。在构造函数中，您必须定义 Jquery part 。看看这个。这是您需要的Autocomplete 的工作示例

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

只需将此代码放入构造函数中即可：

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

【讨论】：

你在哪里创建了变量？你能解释一下吗？想不通？
我在类内部和构造函数外部声明了变量名availableTags。然后按照答案中的说明为变量分配一些值。然后在构造函数中使用 this 使用相同的变量。希望现在清楚。
哦，太好了！知道了！但我想知道///<reference src="server url"> 也可以做些什么。这样它会在构造函数中起作用吗？我的意思是说组件中的任何位置？还是这样有限制？
yups :) 如果此答案对您有帮助，请点赞。还有一件事///<reference src=' '> 是将文件导入到 .ts 文件的类型。如果我们想添加特定文件，即我们通过这种方式导入的 javascript 文件。通常我们可以称它为typings
感谢您的帮助！

【解决方案2】：

如果你不关心 jQuery 的类型，你可以声明 $:

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

declare var $: any;

如果你正在寻找打字，你可以关注这个帖子：

using jQuery globaly within angular 2 application

【讨论】：