Question

How to import jQuery to Angular2 Typescrypt projects?

我不知道这是否安全，但一定会帮到你。相当

Answer 1

第一步

来自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>
...

第二步

我的测试项目的\ src \程序\测试\ test.component.ts 的

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

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

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

@Component({
  ...
})

第3步

我的测试项目的\ src \程序\测试\ test.component.ts 的

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

export class TestComponent implements OnInit {

  constructor() { }

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

}

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

Answer 2

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

第1步：

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

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

第2步：或者我们可以在index.html

中使用在线CDN或jQuery库的本地路径

<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>

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

2 个答案: