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或通过asset / 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语句之后在类中添加clarify语句来使用它，例如：

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应用程序的全局执行上下文中添加一个新对象（基本上成为全局窗口对象的属性）。

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

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

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

1 个答案: