Wie verwende ich die Lodash-Methode in Angular?

In diesem Artikel wird hauptsächlich die Verwendung von Lodash in Angular vorgestellt.

Wie Lodash ein bekanntes Paket für JavaScript ist, insbesondere für die Verwendung von Angular lodash? Dies kann auch als SOP für die Verwendung herkömmlicher JavaScript-Pakete in Angular angesehen werden.

Version

Node.js 8.9.4

Angular CLI 1.6.2

Angular 5.2.2

Lodash installieren

~/MyProject $ npm install lodash --save

Verwenden Sie npm, um lodash zu installieren.

Installieren Sie die Lodash-Typdefinitionsdatei

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

Traditionelles JavaScript verfügt über keine Typen, aber TypeScript ist eine stark typisierte Sprache, zusätzlich zu Typen verfügt es auch über Generika. Dies sollte wie mit herkömmlichem JavaScript abgeglichen werden.

Die Lösung für TypeScript besteht darin, *.d.ts, die Typdefinitionsdatei, separat zu verwenden.

Wenn es sich um eine bekannte JavaScript-Bibliothek handelt, hat im Allgemeinen bereits jemand die Typdefinitionsdatei verwaltet und ihre Paketregel lautet @types/package.

Da die Typdefinitionsdatei nur von der TypeScript-Kompilierung verwendet wird, fügen Sie --save-dev hinzu.

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"
  ]
 }
}

Zeile 14

"types" : ["lodash"],

Fügen Sie Typen in typeRoots hinzu und fügen Sie lodash zum Array hinzu, um anzuzeigen, dass TypeScript beim Kompilieren die gerade installierte lodash-Typdefinitionsdatei verwendet.

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

Zeile 2

import * as _ from 'lodash';

Ladet lodash.

Da lodash es gewohnt ist, _ zu verwenden, lautet der Alias ​​beim Importieren _

WebStorm kann die integrierte API von Angular automatisch importieren, aber für JavaScript-Pakete verfügt WebStorm derzeit nicht darüber. Die Methode besteht darin, automatisch zu importieren, und Sie müssen die

15 Zeilen von

_.remove(scores, 2);

manuell laden. Das Entfernen von Elementen aus dem Array war schon immer ein problematischer Teil von JavaScript. , es kann leicht verwendet werden.

Fazit

Wenn es in der Praxis eine Angular-Version des Pakets gibt, wird diese natürlich zuerst verwendet; wenn Sie auf Situationen stoßen, in denen ein JavaScript-Paket verwendet werden muss Zusätzlich zur Installation des Pakets müssen Sie auch die Typdefinitionsdatei installieren und in tsconfig.json festlegen, damit sie korrekt in Angular verwendet und

Beispielcode

Das vollständige Beispiel finden Sie in meinem Fundstück

auf GitHub. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden Sie den Knoten, um das integrierte Debugging zu implementieren

Implementieren Sie die Datumsauswahlkomponente im mobilen Vue-Terminal

So verpacken Sie bestimmte JS-Dateien separat im Webpack

Das obige ist der detaillierte Inhalt vonWie verwende ich die Lodash-Methode in Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!