在 Angular中 使用 Lodash 的方法


Posted in Javascript onFebruary 11, 2018

如何Lodash 是 JavaScript 很有名的 package,尤其??短?理 array 很有一套,Angular ?如何使用 lodash 呢 ? ?也可以??樵 Angular 使用?鹘y 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 定??n

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

?鹘y JavaScript ?K?]有型?e,但 TypeScript 是????型?e?言,除了型?e外?有泛型,??怎???鹘y JavaScript 搭配呢 ?

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

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

由於 type 定??n只是 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 在???r??褂????安?的 lodash type 定??n。

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

第 2 行

import * as _ from 'lodash';

?入 lodash 。

因? lodash ??T以 _ 使用,因此 import ?r特?e取?e名? _

WebStorm ?? Angular ?冉ǖ API,都可以自? import,但?? JavaScript 的 package,目前 WebStorm ??]有?法自? import,需手?虞d入

15 行

_.remove(scores, 2);

?列的移除元素一直是 JavaScript 比?麻?┑牟糠郑?高^ lodash 的 remove() ,可以很??蔚氖褂谩?/p>

Conclusion

???丈先粲 Angular 版本的 package,?然??先使用;若遇到必?使用 JavaScript package 不可的?龊希??税惭b package 外,?要安? type 定??n,?K且在 tsconfig.json ?定,如此才可以在 Angular 正?使用?K通???

Sample Code

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

总结

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

Javascript 相关文章推荐
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
AngularJS表单验证功能分析
May 26 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 #Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 #Javascript
Vue实现点击后文字变色切换方法
Feb 11 #Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 #Javascript
vue刷新和tab切换实例
Feb 11 #Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 #Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 #Javascript
You might like
新版PHP极大的增强功能和性能
2006/10/09 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
php给数组赋值的实例方法
2019/09/26 PHP
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
JavaScript简介
2015/02/15 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
毕业自荐书
2013/12/09 职场文书
查环查孕证明
2014/01/10 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
领导干部考察材料
2014/02/08 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
2015年双拥工作总结
2015/04/08 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL