項目背景

今天心血來潮，以前不常寫東西，接觸angular以來，覺得有必要分享一些新的體會了，于是來到了這里。

• 管道Pipe可以將數據作為輸入，然后按照規則將其轉換并輸出。

創建項目

ng new meepo-underscore cd meepo-underscore 復制代碼

創建module和初始化pipe

ng g m meepo-underscore ng g pipe map ng g pipe flatten ng g pipe invert ng g pipe range ng g pipe sample ng g pipe shuffle ng g pipe values 復制代碼

分析需求及實現

• map 結構轉數組

meepo-underscore/map.pipe.ts

import { Pipe, PipeTransform } from "@angular/core"; import * as _ from "underscore"; @Pipe({name: "map" }) export class MapPipe implements PipeTransform {transform(value: any, args?: any): any {let re = _.map(value, (item, key) => {return { item: item, key: key };});return re;} } 復制代碼

• 使用

let obj = {name: "bob",school: "school",address: "xueyuan" } 復制代碼<div *ngFor="let item of obj | map">{{item.key}}:{{item.item}} </div> 復制代碼

• flatten 接收一個Array，無論這個Array里面嵌套了多少個Array，flatten()最后都把它們變成一個一維數組

meepo-underscore/flatten.pipe.ts

import { Pipe, PipeTransform } from "@angular/core"; import * as _ from "underscore";@Pipe({name: "flatten" }) export class FlattenPipe implements PipeTransform {transform(value: any, args?: any): any {return _.flatten(value);} } 復制代碼

• 使用

<div *ngFor="let item of [[1],[2],[3,4,5]] | flatten">{{item.key}}:{{item.item}} </div> 復制代碼

• invert 把object的每個key-value來個交換，key變成value，value變成key

import { Pipe, PipeTransform } from '@angular/core'; import * as _ from "underscore";@Pipe({name: 'invert' }) export class InvertPipe implements PipeTransform {transform(value: any, args?: any): any {return _.invert(value);} } 復制代碼

• 使用

<div *ngFor="let item of [{key1:'item1'},{key2:'item2'}] | invert | map">{{item.key}}:{{item.item}} </div> 復制代碼

• range 區間數組

import { Pipe, PipeTransform } from "@angular/core"; import * as _ from "underscore";@Pipe({name: "range" }) export class RangePipe implements PipeTransform {transform(value: any, args?: any): any {return _.range(value, args);} } 復制代碼

• 使用

<div *ngFor="let item of 0 | range:10">{{item}} </div> 復制代碼

• sample 隨機選擇一個或多個元素：

import { Pipe, PipeTransform } from "@angular/core"; import * as _ from "underscore";@Pipe({name: "sample" }) export class SamplePipe implements PipeTransform {transform(value: any, args?: any): any {let item = _.sample(value, args);return item;} }復制代碼

• 使用

<h2 class="title">_.sample</h2> <div *ngFor="let item of obj | map | sample:4">{{item.item}} </div> 復制代碼

• shuffle 用洗牌算法隨機打亂一個集合

import { Pipe, PipeTransform } from '@angular/core'; import * as _ from "underscore";@Pipe({name: 'shuffle' }) export class ShufflePipe implements PipeTransform {transform(value: any, args?: any): any {return _.shuffle(value)}}復制代碼<h2 class="title">_.shuffle</h2> <div *ngFor="let item of obj | map | shuffle">{{item.key}}-{{item.item}} </div> 復制代碼

• values 對象值遍歷

import { Pipe, PipeTransform } from '@angular/core'; import * as _ from "underscore";@Pipe({name: 'values' }) export class ValuesPipe implements PipeTransform {transform(value: any, args?: any): any {return _.values(value);}}復制代碼

發布準備

新建package.json

{"name": "meepo-underscore","version": "2.0.2","repository": "https://github.com/meepobrother/meepo-underscore.git","author": "imeepos <1037483576@qq.com>","license": "MIT","private": false,"scripts": {"git": "git add . && git commit -m 'push to save' && git push origin master"},"peerDependencies": {"@angular/core": "*","@angular/common": "*","rxjs": "*","underscore": "*"},"ngPackage": {"$schema": "./node_modules/ng-packagr/ng-package.schema.json","dest": "../../../meepo/underscore","workingDirectory": "./.ng_build","lib": {"entryFile": "./public_api.ts"}} } 復制代碼

導出模塊

import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { MapPipe } from "./map.pipe"; import { ShufflePipe } from "./shuffle.pipe"; import { SamplePipe } from "./sample.pipe"; import { RangePipe } from "./range.pipe"; import { FlattenPipe } from "./flatten.pipe"; import { ValuesPipe } from "./values.pipe"; import { InvertPipe } from "./invert.pipe";export const PIPES = [MapPipe,ShufflePipe,SamplePipe,RangePipe,FlattenPipe,ValuesPipe,InvertPipe ];@NgModule({imports: [CommonModule],declarations: [...PIPES],exports: [...PIPES] }) export class UnderscoreModule {}復制代碼

發布到npm

ng-packagr -p ./src/app/shared/underscore/package.json 復制代碼

使用安裝

yarn add meepo-underscore 復制代碼import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';import { AppComponent } from './app.component'; import { RouterModule } from '@angular/router'; import { UnderscoreModule } from 'meepo-underscore';@NgModule({declarations: [AppComponent],imports: [BrowserModule,RouterModule.forRoot([]),UnderscoreModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { }復制代碼

總結

本文介紹了 Angular 自定義管道pipe的方法，并發布到npm, 方便使用及管理。

項目地址

總結

以上是生活随笔為你收集整理的angular5.0封装underscore常用pipe并发布到npm全套流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。