如何在Ionic 2中使用lodash？

Question

我刚开始着手一个新项目，使用 Ionic 2。我对 TypeScript 还不太熟悉，并一直在尝试弄清如何将 lodash 包含到我的项目中。

有没有人做过这个，并且可以指点我方向？

- larschla

Answer 1

1. 在终端中使用npm安装lodash：

$:npm i -S lodash 
// npm install --save lodash (--save,-S saves to package.json)

像这样在您的组件中导入lodash：

import * as _ from 'lodash';

- Daniel Wei

---

你也可以通过以下方式获取 types：npm install --save @types/lodash。 - Basil

Answer 2

从Ionic 2 RC0开始，您需要执行以下操作。

npm install @types/lodash --save-dev --save-exact

并像这样导入它

import _ from 'lodash';

- Shamsher

Answer 3

对于 Ionic 3 的未来用户

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

官方文档

npm install 命令将从 NPM 下载库的副本并将其保存在您应用程序的 node_modules 目录中。 --save 将告诉 NPM CLI 向您应用程序的 package.json 依赖列表添加一个条目。 现在，您可以使用该库了。

如果您想要导入 lodash 的所有函数，请使用以下命令：

import lodash from 'lodash';
lodash.capitalize('myStringToCapitalize');

如果您想使用 Lodash 的特定功能，则可以使用：

import { shuffle } from 'lodash';
shuffle(results);

- shery089

---

顺便一提，如果我使用 import { range } from 'lodash'; - 为什么在模板中直接使用 range 无法被识别？我需要在我的 ts 文件中创建类似这样的函数：range(min, max) { return range(min, max) }; - Ricky Levi

Answer 4

实际上，以上的回答都没有提到如果你想在Ionic 2应用程序中使用lodash，你需要安装lodash的类型定义。要将lodash的类型定义安装到项目中，请运行以下命令：

• 全局安装typings节点模块（如果您尚未安装）：sudo npm install typings --global
• 将lodash安装到您的项目中：npm install lodash --save
• 安装lodash的类型定义：typings install lodash --save

一旦您完成了将lodash的类型定义安装到您的项目中，您就可以像这样从ionic2 .ts文件中导入lodash：

import * as _ from 'lodash';

更新：2017年10月2日，Ionic团队发布了一份文档，介绍如何在Ionic项目中使用第三方库。请参考此处，查看如何在最新的ionic中使用lodash的示例http://ionicframework.com/docs/developer-resources/third-party-libs/

- 4308

---

这个建议对我部分有效。最后一个命令没有起作用。标志“--ambient”现在已被弃用，控制台提示使用“--global”，但是当您使用“--global”时，它会抱怨并建议您删除“--global”选项。基本上，typings install lodash --save 对我有用（在执行您建议的前两个命令之后）。谢谢！ - Jane Wayne

当我安装了typings lodash时，它对我很有用。谢谢。 - Ganapat

Answer 5

对我来说，这是在ionic 2 (2.0.0.beta.11)中使用类型定义的方法。

步骤：

sudo npm install typings --g

其次。

npm install lodash --save

"and"。

typings install lodash --save

最后，在项目中使用lodash。

import * as _ from 'lodash';

并且

var index = _.indexOf(albumList, data.album.id)
console.log(index);

- Bheru Lal Lohar

Answer 6

由于这完全取决于您使用的Ionic 2版本，而且以上解决方案并非100％适用于我，但最终将我带到了正确的地方。我想为以下版本的Ionic 2添加我的答案。

ionic framework version: 3.5.0
typescript: 2.3.3

我不需要安装任何东西，Lodash 就在 node_modules/lodash 目录中。

我在我的应用程序的 .ts 文件中唯一做的事情是：

import * as Lodash from 'lodash';

// Inside the class
new_array = Lodash.shuffle(data_array);

- Ricky Levi

Answer 7

应该注意，对于每个组件，您可以添加特定的lodash类型，而不是像之前提到的那样导入所有的lodash import * as _ from 'lodash';

因此，在组件中，如果您只使用isMatch，则可以轻松地将其添加为

import { isMatch } from 'lodash';

然后像这样使用它。

isMatch(this.foo1, this.foo2);

这明确声明了你正在使用的内容，并在与多个开发人员共同开发组件时提高了可维护性。

- user1752532

Answer 8

对于angular 2

1. 使用npm安装lodash:

   npm i -S lodash

2. 像这样导入lodash:

   import * as _ from 'lodash';

对于angular 1.x

1. 使用bower安装ng-lodash包:

   bower install --save ng-lodash

2. 在你的index.html文件中，将脚本引用放在ionic.bundle.js和app.js之间：

3. 将模块添加为应用程序的依赖项

   angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngLodash'])

4. 在控制器中注入并开始使用它

   .controller('yourController', function($scope, lodash) { lodash.assign({ 'a': 1 }, { 'b': 2 }, { 'c': 3 }); });

- Guilherme Viebig

---

这可能适用于Ionic 1，但问题是关于Ionic 2的。 - larschla

Answer 9

这应该是Ionic 2.1.0的正确答案

尝试这个：

npm install -g typings
typings search lodash
typings install lodash --save

也许这个博客可以帮助你。

- awmleer