在 Angular中 使用 Lodash 的方法
如何Lodash 是 JavaScript 很有名的 package，尤其對(duì)於處理 array 很有一套，Angular 該如何使用 lodash 呢 ? 這也可以視為在 Angular 使用傳統(tǒng) 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
傳統(tǒng) JavaScript 並沒(méi)有型別，但 TypeScript 是個(gè)強(qiáng)型別語(yǔ)言，除了型別外還有泛型，這該怎麼與傳統(tǒng) JavaScript 搭配呢 ?
TypeScript 的解決方案是另外使用 *.d.ts ，此為 type 定義檔。
一般來(lái)說(shuō)，若是知名的 JavaScript library，都已經(jīng)有人維護(hù) type 定義檔，其 package 的規(guī)則是 @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 在編譯時(shí)會(huì)使用剛剛安裝的 lodash type 定義檔。
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 。
因?yàn)?lodash 習(xí)慣以 _ 使用，因此 import 時(shí)特別取別名為 _
WebStorm 對(duì)於 Angular 內(nèi)建的 API，都可以自動(dòng) import，但對(duì)於 JavaScript 的 package，目前 WebStorm 還沒(méi)有辦法自動(dòng) import，需手動(dòng)載入
15 行
_.remove(scores, 2);
陣列的移除元素一直是 JavaScript 比較麻煩的部分，透過(guò) lodash 的 remove() ，可以很簡(jiǎn)單的使用。
Conclusion
實(shí)務(wù)上若有 Angular 版本的 package，當(dāng)然優(yōu)先使用；若遇到必須使用 JavaScript package 不可的場(chǎng)合，除了安裝 package 外，還要安裝 type 定義檔，並且在 tsconfig.json 設(shè)定，如此才可以在 Angular 正確使用並通過(guò)編譯
Sample Code
完整的範(fàn)例可以在我的GitHub 上找到
總結(jié)
以上所述是小編給大家介紹的在 Angular中 使用 Lodash 的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Angular項(xiàng)目過(guò)大時(shí)的合理拆分angular?split
這篇文章主要為大家介紹了Angular項(xiàng)目過(guò)大時(shí)的合理拆分angular?split示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了angular *Ngif else用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了詳解AngularJS中的表格使用,作為熱門的JavaScript框架,AngularJS中提供的表格功能十分強(qiáng)大,需要的朋友可以參考下2015-06-06
深入理解Angularjs中的$resource服務(wù)
大家可以知道在Angularjs中可以用$http同服務(wù)器進(jìn)行通信，功能上比較簡(jiǎn)單，AngularJS還提供了另外一個(gè)可選的服務(wù)$resource,使用它可以非常方便的同支持restful的服務(wù)單進(jìn)行數(shù)據(jù)交互。這篇文章主要給大家深入的介紹了Angularjs中的$resource服務(wù)。2016-12-12
Angular.js回顧ng-app和ng-model使用技巧
這篇文章主要回顧Angular.js中ng-app和ng-model使用技巧，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要給大家介紹了關(guān)于Angular中使用MathJax遇到的一些問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Angularjs中數(shù)據(jù)綁定的實(shí)例詳解
這篇文章主要介紹了Angularjs中數(shù)據(jù)綁定的實(shí)例詳解的相關(guān)資料,這里提供簡(jiǎn)單實(shí)例，大家可以參考下，希望通過(guò)本文可以掌握這部分內(nèi)容，需要的朋友可以參考下2017-08-08
如何解決手機(jī)瀏覽器頁(yè)面點(diǎn)擊不跳轉(zhuǎn)瀏覽器雙擊放大網(wǎng)頁(yè)
這篇文章主要介紹了如何解決手機(jī)瀏覽器頁(yè)面點(diǎn)擊不跳轉(zhuǎn)瀏覽器雙擊放大網(wǎng)頁(yè)的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要給大家介紹了關(guān)于Angular中sweetalert彈框的基本使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
什么是 AngularJS？AngularJS簡(jiǎn)介
這篇文章主要介紹了什么是 AngularJS？AngularJS簡(jiǎn)介,本文講解了AngularJS方方面面的基礎(chǔ)知識(shí),AngularJS 是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語(yǔ)言，通過(guò)擴(kuò)展HTML的語(yǔ)法，讓你能更清楚、簡(jiǎn)潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下2014-12-12