在 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 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 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相当简单的分页类
2008/10/02 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP6新特性分析
2016/03/03 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
学术会议邀请函范文
2014/01/22 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL