Maison > Article > interface Web > 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!