如何在 Ionic 2 中使用 lodash？

Posted 2023-03-13

【中文标题】如何在 Ionic 2 中使用 lodash？

【英文标题】：How do i use lodash with Ionic 2?

【发布时间】：2016-01-29 03:26:52

【问题描述】：

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

有没有人做过这件事，可以指出正确的方向吗？

【参考方案1】：

Ionic 3 的未来用户

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

Official Doc

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);

【讨论】：

顺便说一句，如果我使用import range from 'lodash'; - 为什么无法识别直接在模板中使用range？我需要在我的ts 文件中创建类似：range(min,max) return range(min,max) ;

【参考方案2】：

实际上，如果您尝试在 ionic 2 应用程序中使用 lodash，则上述答案均未提及您需要安装 lodash 的类型定义。要将lodash 的类型定义安装到您的项目中，请运行以下命令：

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

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

import * as _ from 'lodash';

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

【讨论】：

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

在我安装typings lodash时为我工作。谢谢。

【参考方案3】：

从您的终端安装lodash 和npm：

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

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

import * as _ from 'lodash';

【讨论】：

你也可以通过npm install --save @types/lodash获得types

【参考方案4】：

需要注意的是，您可以为每个组件添加特定的lodash 类型 而不是用 import * as _ from 'lodash'; 之前提到的内容导入所有 lodash

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

import  isMatch  from 'lodash';

然后像这样使用它

isMatch(this.foo1, this.foo2);

这明确声明了您正在使用的内容，并有助于在与超过 1 个开发人员一起处理组件时提高可维护性

【参考方案5】：

因为这完全取决于您使用的 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);

【参考方案6】：

这一定是 Ionic 2.1.0 的正确答案

试试这个：

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

也许这个blog 可以帮助你

【参考方案7】：

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

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

然后像这样导入

import _ from 'lodash';

【参考方案8】：

对我来说，它使用 ionic 2 (2.0.0.beta.11) 上的类型定义

步骤

sudo npm install typings --g

其次

npm install lodash --save

和

typings install lodash --save

最后在项目中使用 lodash

import * as _ from 'lodash';

和

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

【参考方案9】：

对于角度 2

使用 npm 安装 lodash：

npm i -S lodash

像这样导入lodash：

从'lodash'导入*作为_；

对于角度 1.x

使用 bower 安装包：

凉亭安装 --save ng-lodash

在 ionic.bundle.js 和 app.js 之间的 index.html 中包含脚本：

将模块添加为应用的依赖项

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

注入您的控制器并开始使用它

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

【讨论】：

这可能适用于 Ionic 1，但问题是 Ionic 2。