如何在TypeScript Angular中使用外部Javascript

Question

---

我想在打字稿中使用jquery和easypiechart js文件的功能。

这种方式行不通。

如何定义这些脚本，我在代码中指定为打字稿？

---

index.component.ts

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

import * as $ from "../../../../../assets/plugins/jquery/jquery.min.js";
import { easyPieChart } from "../../../../../assets/plugins/easypiechart/jquery.easypiechart.min.js";

// these above 2 js files are defined in angular.json script section

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})

export class IndexComponent implements OnInit {

  constructor() {}

  ngOnInit() {

    //$(function(){
    //  $('.easypiechart').easyPieChart();
    //});

    // How to write this above script as typescript ?????????????????????

  }
}

Answer 1

如果您将它们包含在脚本或index.html中，则无需再次将它们导入到.TS文件中。

改为使用declare，它应该可以工作 What does 'declare' do in 'export declare class Actions'?

Answer 2

从上述问题来看， jquery.easypiechart.min.js 是您需要在角度应用程序中使用的外部js 。 >

1. 将js放在资产文件夹下，例如 /assets/js/jquery.easypiechart.min.js

2. 转到项目 angular.json 文件，然后将Architect节点的scripts节点下的条目作为数组中的条目放置。

   “脚本”：[                   “ ./node_modules/jquery/dist/jquery.min.js”，
                     “ ../ src / assets / js / jquery.easypiechart.min.js” ]

现在您可以在任何项目组件中引用外部js

  declare var $: any;// referencing jQuery library
    @Component({
      selector: 'app-index',
      templateUrl: './index.component.html',
      styleUrls: ['./index.component.scss']
    })

    export class IndexComponent implements OnInit {
      constructor() {}
      ngOnInit() {
      $(document).ready(function () {
          //accessing easypiechart.min.js.
          $('.easypiechart').easyPieChart();
         });
      }
    }

Answer 3

与其将其放在资产文件夹中，不如将其用作node_modules依赖项

要运行简便的饼图，请运行npm i easy-pie-chart --save，对于jquery，请运行npm i jquery

Answer 4

通常，您不想在Angular中使用jquery，因为它通常意味着直接修改DOM，这是一个不好的做法，但是有一种方法可以做到：https://medium.com/all-is-web/angular-5-using-jquery-plugins-5edf4e642969

如果您想绘制饼图或其他类型的图表，可以改用ng2-charts，它将使charts.js与Angular和Typescript一起使用。