项目背景
今天心血来潮，以前不常写东西，接触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">_.sampleh2>
<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">_.shuffleh2>
<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 <[email protected]>",
"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, 方便使用及管理。
项目地址