Comment utiliser la méthode Lodash en Angular ?

Cet article présente principalement comment utiliser Lodash dans Angular. Les amis qui en ont besoin peuvent s'y référer

Comment Lodash est un package JavaScript bien connu, en particulier pour le traitement des tableaux. Comment utiliser Angular Qu'en est-il. lodash ? Cela peut également être considéré comme une SOP pour l'utilisation de packages JavaScript traditionnels dans Angular.

Version

Node.js 8.9.4

Angular CLI 1.6.2

Angular 5.2.2

Installer Lodash

~/MyProject $ npm install lodash --save

Utilisez npm pour installer lodash.

Installez le fichier de définition de type Lodash

~/MyProject $ npm install @types/lodash --save-dev

Le JavaScript traditionnel n'a pas de types, mais TypeScript est un langage fortement typé. En plus des types, il en a également. génériques. Comment cela fonctionne-t-il avec le JavaScript traditionnel ?

La solution pour TypeScript consiste à utiliser *.d.ts séparément, qui est le fichier de définition de type.

De manière générale, s'il s'agit d'une bibliothèque JavaScript bien connue, quelqu'un a déjà maintenu le fichier de définition de type et sa règle de package est @types/package.

Étant donné que le fichier de définition de type n'est utilisé que pour la compilation TypeScript, ajoutez --save-dev .

tsconfig.json
{
 "compileOnSave": false,
 "compilerOptions": {
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
   "node_modules/@types"
  ],
  "types" : ["lodash"],
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

Ligne 14

"types" : ["lodash"],

Ajoutez des types à typeRoots et ajoutez lodash au tableau, indiquant que TypeScript utilisera le fichier de définition de type lodash qui vient d'être installé lors de la compilation.

Import Lodash
app.component.ts
import {Component, OnInit} from '@angular/core';
import * as _ from 'lodash';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 title = 'app';
 ngOnInit(): void {
  const scores: number[] = [100, 99, 98];
  _.remove(scores, 2);
  scores.forEach((score) => console.log(score));
 }
}

Ligne 2

import * as _ from 'lodash';

Charger le lodash.

Parce que lodash est habitué à utiliser _, l'alias est donc _ lors de l'importation

WebStorm peut importer automatiquement l'API intégrée d'Angular, mais pour les packages JavaScript, WebStorm ne l'a pas actuellement. La méthode consiste à importer automatiquement et vous devez charger manuellement les 15 lignes de

_.remove(scores, 2);

La suppression d'éléments du tableau a toujours été une partie gênante de JavaScript via la suppression de lodash. (), cela peut être très simple à utiliser.

Conclusion

En pratique, s'il existe une version Angular du package, elle sera bien entendu utilisée en premier si vous rencontrez des situations où le package JavaScript doit être utilisé ; , en plus d'installer le package, vous devez également installer le fichier de définition de type et le définir dans tsconfig.json afin qu'il puisse être utilisé correctement dans Angular et compilé

Exemple de code

L'exemple complet peut être trouvé dans mon Found

sur GitHub. Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Utiliser un nœud pour implémenter le débogage intégré

Implémenter le composant de sélection de date dans le terminal mobile vue

Comment empaqueter séparément les fichiers JS spécifiés dans webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!