我如何使用lodash与Ionic 2？

I've just started working on a new project, using Ionic 2. I'm new to TypeScript, and have been trying to figure out how to include lodash to my project.

我刚刚开始使用Ionic 2开发一个新项目。我是TypeScript的新手，并且一直试图弄清楚如何将lodash包含到我的项目中。

Is there anyone out there who has done this, and can point me in the right direction?

那里有没有人做过这件事，能指出我正确的方向吗？

9 个解决方案

#1

Install lodash with npm from your terminal:

从你的终端用npm安装lodash：

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

Import lodash in your component like this:

在组件中导入lodash，如下所示：
```
import * as _ from 'lodash';
```

#2

Starting from Ionic 2 RC0 you have to do the following.

从Ionic 2 RC0开始，您必须执行以下操作。

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

and import it like

并导入它

import _ from 'lodash';

#3

Actually none of the answers above mention that you need to install lodash's type definitions if you are trying to use lodash in your ionic 2 app. To install lodash's type definitions to your project run the following commands:

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

Install typings node module as global (if you have not already): sudo npm install typings --global
将typings节点模块安装为全局（如果还没有）：sudo npm install typings --global
Install lodash to your project: npm install lodash --save
将lodash安装到您的项目中：npm install lodash --save
Install lodash's type definitions: typings install lodash --save
安装lodash的类型定义：typings install lodash --save

Once you are finished installing lodash's type definitions to your project you can import lodash to your ionic2 .ts file like this:

完成将lodash的类型定义安装到项目后，可以将lodash导入到ionic2 .ts文件中，如下所示：

import * as _ from 'lodash';

UPDATE: 10/02/2017 Ionic team published a document how to use 3rd party libraries in Ionic projects. Please refer here to see an example of how to use lodash with latest ionic http://ionicframework.com/docs/developer-resources/third-party-libs/

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

#4

For Future Users of Ionic 3

对于Ionic 3的未来用户

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

Official Doc

官方文件

npm install will download a copy of the library from NPM and save it in your app’s node_modules directory. --save will tell the NPM CLI to add an entry to your app’s package.json dependency list. You can use the library now.

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

If you want to import all functions from lodash then use

如果要从lodash导入所有函数，请使用

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

If you want to use specific function from lodash then use

如果你想使用lodash中的特定功能，那么使用

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

#5

For angular 2

对于角度2

Install lodash with npm:

用npm安装lodash：

npm i -S lodash

npm i -S lodash
Import lodash like this:

像这样导入lodash：

import * as _ from 'lodash';

从'lodash'导入* as _;

For angular 1.x

对于角1.x

Install packages with bower:

用凉亭安装包：

bower install --save ng-lodash

凉亭安装--save ng-lodash
Include scripts in your index.html between ionic.bundle.js and app.js:

在index.html中包含ionic.bundle.js和app.js之间的脚本：
Add module as a dependency to your app

添加模块作为应用程序的依赖项

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

angular.module（'starter'，['ionic'，'starter.controllers'，'starter.services'，'ngLodash']）
Inject into your controller and start using it

注入控制器并开始使用它

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

.controller（'yourController'，function（$ scope，lodash）{lodash.assign（{'a'：1}，{'b'：2}，{'c'：3}）;}）;

#6

For me its working with type definition on ionic 2 (2.0.0.beta.11)

对我来说，它在离子2（2.0.0.beta.11）上使用类型定义

steps

脚步

sudo npm install typings --g

Secondly

其次

npm install lodash --save

and

和

typings install lodash --save

Finally use lodash into project with

最后使用lodash进入项目

import * as _ from 'lodash';

and

和

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

#7

This must be the Correct answer With Ionic 2.1.0

这必须是Ionic 2.1.0的正确答案

Try this:

尝试这个：

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

Maybe this blog may help you

也许这个博客可以帮到你

#8

Since it's all depended on the Ionic 2 version you're using, and none of the above was 100% my solution, but did get me to the right point eventually. I want to add my version of the answer for the following version of Ionic 2

因为它全部依赖于你正在使用的Ionic 2版本，并且以上都不是100％我的解决方案，但最终确实让我到了正确的位置。我想为以下版本的Ionic 2添加我的答案版本

ionic framework version: 3.5.0
typescript: 2.3.3

And I didn't had to install anything, Lodash was simply there inside the node_modules/lodash directory.

而且我没有安装任何东西，Lodash只是在node_modules / lodash目录中。

The only thing I did inside my application .ts files is:

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

import * as Lodash from 'lodash';

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

#9

It should be noted that for each component you can add the specific lodash type instead of importing all of lodash with what has been mentioned before import * as _ from 'lodash';

应该注意的是，对于每个组件，您可以添加特定的lodash类型，而不是导入所有lodash与导入*之前提到的内容作为_来自'lodash';

So in the component if you are only using isMatch you can just easily add it as

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

import { isMatch } from 'lodash';

and then use it like so

然后像这样使用它

isMatch(this.foo1, this.foo2);

This explicitly declares what you are using and helps with maintainability when working with more then 1 dev on a component

这明确地声明了您正在使用的内容，并且在组件上使用超过1个dev时有助于可维护性

#1