如何在 TypeScript Angular 中使用外部 Javascript

Posted 2023-03-13

【中文标题】如何在 TypeScript Angular 中使用外部 Javascript

【英文标题】：How to Use External Javascript in TypeScript Angular

【发布时间】：2019-06-28 20:44:23

【问题描述】：

---

我想在 typescript 中使用 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 ?????????????????????

  

【问题讨论】：

这看起来是dublicate。 ***.com/questions/47346559/…

正如指出的那样，它是重复的，为什么还要在 Angular 中使用 jquery？有什么具体原因吗？

不要在 Angular 中使用 jquery。选择一个框架或另一个

using external JS libraries in my angular 2 project的可能重复

【参考方案1】：

从上面的问题来看，jquery.easypiechart.min.js 是您需要在 Angular 应用程序中用作 external js 的那个。。 p>

把js放在assets文件夹下说/assets/js/jquery.easypiechart.min.js

转到您的项目 angular.json 文件并在架构师节点的脚本节点下作为数组中的条目放置。

“脚本”：[ "./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();
         );
      
    

【参考方案2】：

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

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

【参考方案3】：

您应该将其用作 node_modules 依赖项，而不是将其放在资产文件夹中

对于简单的饼图运行这个npm i easy-pie-chart --save &对于jquery运行npm i jquery

【参考方案4】：

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

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