web-dev-qa-db-ja.com

Ionic 2でlodashを使用するにはどうすればよいですか？

Ionic 2. TypeScriptを初めて使用し、プロジェクトにlodashを含める方法を見つけようとして、新しいプロジェクトの作業を開始しました。

これを行って、私を正しい方向に向けることができる人はいますか？

typescriptioniclodash
17
larschla

  1. ターミナルからlodashとnpmをインストールします。

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

  2. 次のように、コンポーネントにlodashをインポートします。

    import * as _ from 'lodash';
16
Daniel Wei

Ionic 2 RC から開始して、次のことを行う必要があります。

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

次のようにインポートします

import _ from 'lodash';
13
Shamsher

Ionic 3の将来のユーザー向け

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

公式ドキュメント

npm installはNPMからライブラリのコピーをダウンロードし、アプリのnode_modulesディレクトリに保存します。 --saveは、アプリのpackage.json依存関係リストにエントリを追加するようにNPMCLIに指示します。これでライブラリを使用できます。

Lodashからすべての関数をインポートする場合は、

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

Lodashから特定の機能を使用したい場合は、

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

実際、上記の回答のいずれも、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';

更新：10/02/2017 Ionicチームは、Ionicプロジェクトでサードパーティライブラリを使用する方法のドキュメントを公開しました。方法の例については、こちらを参照してください最新のlodashを使用するionic http://ionicframework.com/docs/developer-resources/third-party-libs/

10
Oleksiy Kononenko

For angular 2

  1. Npmでlodashをインストールします。

    npm i -S lodash

  2. 次のようにlodashをインポートします。

    import * as _ from'lodash ';

For angular 1.x

  1. Bowerを使用してパッケージをインストールします。

    bower install --save ng-lodash

  2. Index.htmlのionic.bundle.jsとapp.jsの間のスクリプトを含めます。

  3. アプリへの依存関係としてモジュールを追加する

    angle.module（ 'starter'、['ionic'、 'starter.controllers'、 'starter.services'、 'ngLodash']）

  4. コントローラに注入して使用を開始します

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

1
Guilherme Viebig

コンポーネントごとに、import * as _ from 'lodash';の前に述べたものですべてのlodashをインポートする代わりに、特定のlodashタイプを追加できることに注意してください。

したがって、コンポーネントでisMatchのみを使用している場合は、次のように簡単に追加できます。

import { isMatch } from 'lodash';

そしてそれをそのように使う

isMatch(this.foo1, this.foo2);

これにより、使用しているものが明示的に宣言され、コンポーネントで複数の開発者を操作する際の保守性が向上します。

1
user1752532

これは正解である必要がありますIonic 2.1.0

これを試して：

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

多分これ blog あなたを助けるかもしれません

1
awmleer

それはすべてあなたが使用している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);
1
Ricky Levi

私にとっては、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);
1
Bheru Lal Lohar