在 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 相关文章推荐
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
VUE实现吸底按钮
Mar 04 Vue.js
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二维数组矩形转置实例
2016/07/20 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
2015/04/10 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Python列表list操作相关知识小结
2020/01/29 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
css3 transform属性详解
2014/09/30 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
高校教师岗位职责
2014/03/18 职场文书
入股合作协议书
2014/10/12 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
室外天线与收音机天线杆接合方法
2022/04/05 无线电