在 Angular 2/4 中使用 jQuery 的最简单和最短的方法答案

【问题标题】：Easiest and Shortest way possible to use jQuery in Angular 2/4在 Angular 2/4 中使用 jQuery 的最简单和最短的方法
【发布时间】：2018-02-16 01:00:24
【问题描述】：

How to use jQuery with Angular?

How to import jQuery to Angular2 Typescrypt projects?

我不知道这是否安全，但肯定会对您有所帮助。相当

【问题讨论】：

阅读：gurustop.net/blog/2016/11/18/3821/…
已经有很多相同的答案了，你到底想知道什么？你卡在某个地方了吗？然后发布您的代码

标签： jquery angular typescript

【解决方案1】：

我们有两个选择，在 angular2/4 中使用 jQuery。

第 1 步：

将 jQuery 库下载到您的项目文件夹中，并在脚本模块中指定 angular/cli json 中的路径。

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

第二步：或者我们可以使用在线CDN或者jQuery库的本地路径index.html

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700" rel="stylesheet">

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
//here you can give link to it
  </head>

【讨论】：

【解决方案2】：

第一步

来自 index.html

我的测试项目\src\index.html

在app-root标签下方输入jQuery cdn。

...
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
...

第二步

my-test-project\src\app\test\test.component.ts

转到所需的组件 .ts 脚本。

import { Component, OnInit } from '@angular/core';

// this line will allow you to use jQuery
declare var $: any;

@Component({
  ...
})

第三步

my-test-project\src\app\test\test.component.ts

通过在 jQuery 语法 $(() => { /* content here */ }) 中记录 'I<3Cats' 来测试 jQuery。

export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $(() => {
      console.log('hello there!');
    });
  }

}

您也可以将此技术与其他 javscript 库一起使用。我不知道这是否安全，但肯定会帮助你。相当

【讨论】：