Question

在Angular中进行开发时，我们经常需要使用外部JS库，因此，我今天要寻求在全球范围内进行此操作的最简洁方法。

实际上，我正在尝试包括dateFormat JS库： https://www.npmjs.com/package/dateformat

问题1： JS库是使用相同的体系结构创建的，还是有多种方法可以将它们包含在项目中。

问题2：如何在全球范围内将这个特定的库包含在我的项目中，我可以在我的 app.module.ts 中做一些事情使其在所有项目中可用吗？

我实际上所做的是：

npm install dateformat

我正试图将其简单地添加到一个组件中，但是这种方法失败了：

import * as dateformat from "dateformat";

@Component({
  selector: 'page-notifications',
  templateUrl: 'notifications.html'
})

export class NotificationsPage {

    constructor(){
        console.log("test",dateFormat(new Date(), "dddd, mmmm dS, yyyy, h:MM:ss TT") );
    }

}

Answer 1

包括外部普通javascript库的最佳方法是使用npm install ...安装它，然后将所有.js和.css文件（来自node_modules文件夹）添加到angular.json文件中分别在scripts和styles属性中。这些脚本和样式将与您的应用程序捆绑在一起，并且在每个组件中您都可以访问它们定义的全局变量。

例如，您可以npm安装jQuery，将其添加到script属性的angular.json文件中，如下所示：

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

像这样在顶部声明它：

import * as $ from 'jquery';

然后您可以像平常一样使用它

EXAMPLE

Answer 2

这取决于每个库的操作方式。您可以尝试查看是否有用于角度的包装器库。对于全局库，您可以将其添加到fav_num_dict = {13: 'A', 33: 'B', 23: 'C', 25: 'D', 11: 'E', 4: 'F'} reversed_dict = dict((val,key) for key, val in fav_num_dict.items()) people_to_check = ["D", "B"] for person in people_to_check: if person in reversed_dict: print(person, reversed_dict[person])或index.html的scripts数组中。

您也可以像以前一样使用angular.json，如果库允许的话，这是最干净的方法。据我所知，import库是可以的，您只需要纠正一个错字即可：（dateformat vs dateFormat）

dateformat

Answer 3

要获得预期的结果，请使用以下选项，将npm install @ types / dateformat与dateformat一起使用

问题：在TypeScript 2.0中，无需任何工具，仅在npm即可进行类型声明。 @types范围包包含外部库的类型定义（例如lodash，jQuery，dateformat），这些节点的类型定义使我们能够使用require作为dateformat库的全局函数

请参阅此链接以获取更多详细信息 http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html https://basarat.gitbooks.io/typescript/docs/types/@types.html

参考代码：

foreach ($rr->apollo->data as $key => $value) {
        if(isset($value->price)){
            echo $value->price;
            echo "</br>";
        }
     }

component.ts

npm install @types/dateformat --save npm install dateformat --save


import { Component } from '@angular/core';
import {formatDate } from '@angular/common';
import * as dateformat from "dateformat";

@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; now = new Date(); result: any = ''; test:any = dateformat;

工作代码示例-https://stackblitz.com/edit/angular-wmxejs?file=src/app/app.component.ts

注意：包含的formatDate是内置的，并且可以以角度形式方便地用于格式化日期，因此只需从@ angular / common导入（在上面的示例中添加了示例工作代码）

在全球范围内正确地将外部Javascript库包含到Angular项目中

3 个答案: