在 Angular中 使用 Lodash 的方法

2018-02-17 19:16:06来源:作者:人点击

分享

如何Lodash 是 JavaScript 很有名的 package,尤其於理 array 很有一套,Angular 如何使用 lodash 呢 ? 也可以在 Angular 使用 JavaScript package 的 SOP。

Version

Node.js 8.9.4

Angular CLI 1.6.2

Angular 5.2.2

安 Lodash

~/MyProject $ npm install lodash --save

使用 npm 安 lodash 。

安 Lodash Type 定

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

JavaScript 有型,但 TypeScript 是型言,除了型外有泛型,怎 JavaScript 搭配呢 ?

TypeScript 的解方案是另外使用 *.d.ts ,此 type 定。

一般,若是知名的 JavaScript library,都已有人 type 定,其 package 的是 @types/package 。

由於 type 定只是 TypeScript 使用,以此加上 --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"  ] }}

14 行

"types" : ["lodash"],

在 typeRoots 新增 types ,在列中加入 lodash ,表示 TypeScript 在使用安的 lodash type 定。

Import Lodashapp.component.tsimport {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)); }}

第 2 行

import * as _ from 'lodash';

入 lodash 。

因 lodash 以 _ 使用,因此 import 特取名 _

WebStorm 於 Angular 建的 API,都可以自 import,但於 JavaScript 的 package,目前 WebStorm 有法自 import,需手入

15 行

_.remove(scores, 2);

列的移除元素一直是 JavaScript 比麻的部分,透 lodash 的 remove() ,可以很的使用。

Conclusion

上若有 Angular 版本的 package,然先使用;若遇到必使用 JavaScript package 不可的合,除了安 package 外,要安 type 定,且在 tsconfig.json 定,如此才可以在 Angular 正使用通

Sample Code

完整的例可以在我的GitHub 上找到

总结

以上所述是小编给大家介绍的在 Angular中 使用 Lodash 的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对第七城市网站的支持!

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台