如何在Angular和typecript应用程序中整合lodash

我们已经在之前的文章中讨论过lodash库。

这篇文章涵盖了整合到Angular应用程序中的步骤。

我们需要一定的步骤来将第三方库集成到Angular应用程序中。

有了这些，你就可以在Angular项目中使用实用功能。

我将解释一下现有的应用程序，它是使用Angular cli代码生成器工具生成的应用程序。

下面的步骤将适用于所有Angula 10/11/12版本。

现在进入项目目录并安装lodash库。

安装和设置lodash

Lodash提供了npm和yarn安装程序。

首先，根据你的软件包管理器使用以下命令在你的项目中安装

npm install --save lodash or
yarn add lodash

这将在package.json中创建以下条目

"dependencies": {
    "lodash": "^4.17.21",
    //...
  },

这将在你的projectdirectory/node_modules/lodash文件夹中添加lodash的依赖项。

安装types/lodash定义文件

下一步是配置typescript定义文件。

Lodash是一个javascript库，Angular是基于typescripts的。所以你需要提供typescript定义文件。T 这个文件的扩展名总是以d.ts结尾。

这个文件包含了javascript对象的类型检查信息。

用于类型检查的包是@types/lodash。

如果你不知道某个特定库的类型信息，你可以检查微软的类型工具。

npm install --save @types/lodash
yarn add @types/lodash

一旦lodash和打字定义文件被成功安装，你需要做如下代码修改。

angular Component lodash的变化

你不需要在模块层面进行任何代码修改，相反，你可以在你的组件中进行修改。

最好的方法是写一个实用的服务，作为这个模块的包装，这样组件和模块就可以松散地耦合在一起。

现在，我给出了组件使用的例子。

import * as _ from 'lodash';
@Component({})
export class AppComonent implements OnInit {
  ngOnInit() {
    console.log(_.isEmpty({})); // returns true
  }
}

将模块中的所有类和方法导入这个组件。

现在你可以在Underscore上调用任何函数了。