项目背景

今天心血来潮，以前不常写东西，接触angular以来，觉得有必要分享一些新的体会了，于是来到了这里。

管道Pipe可以将数据作为输入，然后按照规则将其转换并输出。

创建项目

ng new meepo-underscorecd meepo-underscore复制代码

创建module和初始化pipe

ng g m meepo-underscoreng g pipe mapng g pipe flattenng g pipe invertng g pipe rangeng g pipe sampleng g pipe shuffleng 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"}复制代码


    
         {
   {item.key}}:{
   {item.item}}
    
复制代码

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);  }}复制代码

使用


    
         {
   {item.key}}:{
   {item.item}}
    
复制代码

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);  }}复制代码

使用


    
         {
   {item.key}}:{
   {item.item}}
    
复制代码

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);  }}复制代码

使用


    
         {
   {item}}
    
复制代码

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;  }}复制代码

使用

_.sample
    
       {
   {item.item}}
    
复制代码

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)  }}复制代码

_.shuffle
    
       {
   {item.key}}-{
   {item.item}}
    
复制代码

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, 方便使用及管理。