在 Ionic 5 / Angular 9 项目上添加外部 Javascipt 文件

Question

我想在我的 Ionic 5 / Angular 9 项目中添加一些 jquery 函数。

我从 angular.json 文件中调用文件。一些功能可以工作，因为我已经通过 npm 安装了 Jquery 和 Bootstrap。

但我不知道如何能够使用其他人。

这些是文件

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "src/assets/js/bootstrap.min.js",
          "src/assets/js/charts.js",
          "src/assets/js/colors.js",
          "src/assets/js/filters.js",
          "src/assets/js/global.js",
          "src/assets/js/idangerous.swiper.min.js",
          "src/assets/js/isotope.pkgd.min.js",
          "src/assets/js/jqColorPicker.js",
          "src/assets/js/jquery-2.1.4.min.js",
          "src/assets/js/jquery-ui.js",
          "src/assets/js/jquery-ui.min.js",
          "src/assets/js/jquery.canvasjs.min.js",
          "src/assets/js/jquery.countTo.js",
          "src/assets/js/jquery.easy-autocomplete.min.js",
          "src/assets/js/jquery.mixitup.js",
          "src/assets/js/jquery.viewportchecker.min.js",
          "src/assets/js/magnific.js",
          "src/assets/js/map.js",
          "src/assets/js/script.js",
          "src/assets/js/sorttable.js",
          "src/assets/js/wow.js"
        ]
      },

任何提示？

Answer 1

你需要通读这篇文章：https : //angular.io/guide/using-libraries

简而言之，您的情况：

• 使用 NPM 或通过 assets/js 中的直接 js 文件安装库

• 确保在 angular.json 中添加了引用

   "scripts": [
     "node_modules/jquery/dist/jquery.slim.js",
     "node_modules/popper.js/dist/umd/popper.js",
     "node_modules/bootstrap/dist/js/bootstrap.js"
   ]
  

完成后，就相当于您通过脚本标签添加它。

要在 Angular/Ionic 应用程序中使用此类库，您有几个选择：

支持命名导出的库：

import { myFunction } from 'theLibraryName';

或者

import myLibrary from 'theLibraryName';

如果它是一个遗留库，请尝试通过在导入语句之后的类中添加声明语句来尝试使用它，如下所示：

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

declare const GIFEncoder: any;

@Component({
  selector: 'page-download-gif',
  templateUrl: 'download-gif.page.html',
  styleUrls: ['download-gif.page.scss']
})
export class DownloadGifPage {

  constructor(
    
  ) {
  }
  
}

正如 Angular 文档所建议的，您可以通过将这些库添加到 src/typings.d.ts 中的全局类型来手动声明这些库

更新不使用导出的旧库：

每个 js 库都有不同的初始化策略，但在大多数情况下，它们最终会向您的 web 应用程序的全局执行上下文添加一个新对象（基本上成为全局 window 对象的属性）。

因此，如果您执行了上述步骤并需要检查这样的库是否可用于您的代码库 - 您可以通过开发控制台发出与该库相关的命令。

这是我为 sortable.js 做的一个例子：