{"id":19757833,"url":"https://github.com/meepobrother/meepo-underscore","last_synced_at":"2026-04-12T22:32:35.442Z","repository":{"id":57294146,"uuid":"127852487","full_name":"meepobrother/meepo-underscore","owner":"meepobrother","description":"angular封装underscore常用pipe通道","archived":false,"fork":false,"pushed_at":"2018-04-03T04:53:19.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-11T12:05:15.060Z","etag":null,"topics":["angular","pipe","underscore"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meepobrother.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-03T04:50:40.000Z","updated_at":"2018-04-03T04:53:54.000Z","dependencies_parsed_at":"2022-08-29T09:50:46.630Z","dependency_job_id":null,"html_url":"https://github.com/meepobrother/meepo-underscore","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meepobrother%2Fmeepo-underscore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meepobrother%2Fmeepo-underscore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meepobrother%2Fmeepo-underscore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meepobrother%2Fmeepo-underscore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meepobrother","download_url":"https://codeload.github.com/meepobrother/meepo-underscore/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241089448,"owners_count":19907751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","pipe","underscore"],"created_at":"2024-11-12T03:21:34.832Z","updated_at":"2025-10-23T19:02:44.113Z","avatar_url":"https://github.com/meepobrother.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 项目背景\n\u003e 今天心血来潮，以前不常写东西，接触angular以来，觉得有必要分享一些新的体会了，于是来到了这里。\n\n- 管道Pipe可以将数据作为输入，然后按照规则将其转换并输出。\n\n## 创建项目\n```sh\nng new meepo-underscore\ncd meepo-underscore\n```\n\n## 创建module和初始化pipe\n```sh\nng g m meepo-underscore\nng g pipe map\nng g pipe flatten\nng g pipe invert\nng g pipe range\nng g pipe sample\nng g pipe shuffle\nng g pipe values\n```\n\n## 分析需求及实现\n\n- map 结构转数组\n\u003e meepo-underscore/map.pipe.ts\n```ts\nimport { Pipe, PipeTransform } from \"@angular/core\";\nimport * as _ from \"underscore\";\n@Pipe({\n  name: \"map\"\n})\nexport class MapPipe implements PipeTransform {\n  transform(value: any, args?: any): any {\n    let re = _.map(value, (item, key) =\u003e {\n      return { item: item, key: key };\n    });\n    return re;\n  }\n}\n```\n- 使用\n```ts\nlet obj = {\n    name: \"bob\",\n    school: \"school\",\n    address: \"xueyuan\"\n}\n```\n```html\n\u003cdiv *ngFor=\"let item of obj | map\"\u003e\n    {{item.key}}:{{item.item}}\n\u003c/div\u003e\n```\n- flatten 接收一个Array，无论这个Array里面嵌套了多少个Array，flatten()最后都把它们变成一个一维数组\n\u003e meepo-underscore/flatten.pipe.ts\n```ts\nimport { Pipe, PipeTransform } from \"@angular/core\";\nimport * as _ from \"underscore\";\n\n@Pipe({\n  name: \"flatten\"\n})\nexport class FlattenPipe implements PipeTransform {\n  transform(value: any, args?: any): any {\n    return _.flatten(value);\n  }\n}\n```\n- 使用\n```html\n\u003cdiv *ngFor=\"let item of [[1],[2],[3,4,5]] | flatten\"\u003e\n    {{item.key}}:{{item.item}}\n\u003c/div\u003e\n```\n- invert 把object的每个key-value来个交换，key变成value，value变成key\n```ts\nimport { Pipe, PipeTransform } from '@angular/core';\nimport * as _ from \"underscore\";\n\n@Pipe({\n  name: 'invert'\n})\nexport class InvertPipe implements PipeTransform {\n  transform(value: any, args?: any): any {\n    return _.invert(value);\n  }\n}\n```\n- 使用\n```html\n\u003cdiv *ngFor=\"let item of [{key1:'item1'},{key2:'item2'}] | invert | map\"\u003e\n    {{item.key}}:{{item.item}}\n\u003c/div\u003e\n```\n- range 区间数组\n```ts\nimport { Pipe, PipeTransform } from \"@angular/core\";\nimport * as _ from \"underscore\";\n\n@Pipe({\n  name: \"range\"\n})\nexport class RangePipe implements PipeTransform {\n  transform(value: any, args?: any): any {\n    return _.range(value, args);\n  }\n}\n```\n- 使用\n```html\n\u003cdiv *ngFor=\"let item of 0 | range:10\"\u003e\n    {{item}}\n\u003c/div\u003e\n```\n- sample 随机选择一个或多个元素：\n```ts\nimport { Pipe, PipeTransform } from \"@angular/core\";\nimport * as _ from \"underscore\";\n\n@Pipe({\n  name: \"sample\"\n})\nexport class SamplePipe implements PipeTransform {\n  transform(value: any, args?: any): any {\n    let item = _.sample(value, args);\n    return item;\n  }\n}\n\n```\n- 使用\n```html\n\u003ch2 class=\"title\"\u003e_.sample\u003c/h2\u003e\n\u003cdiv *ngFor=\"let item of obj | map | sample:4\"\u003e\n  {{item.item}}\n\u003c/div\u003e\n```\n- shuffle 用洗牌算法随机打乱一个集合\n```ts\nimport { Pipe, PipeTransform } from '@angular/core';\nimport * as _ from \"underscore\";\n\n@Pipe({\n  name: 'shuffle'\n})\nexport class ShufflePipe implements PipeTransform {\n\n  transform(value: any, args?: any): any {\n    return _.shuffle(value)\n  }\n\n}\n\n```\n\n```html\n\u003ch2 class=\"title\"\u003e_.shuffle\u003c/h2\u003e\n\u003cdiv *ngFor=\"let item of obj | map | shuffle\"\u003e\n  {{item.key}}-{{item.item}}\n\u003c/div\u003e\n```\n- values 对象值遍历\n\n```ts\nimport { Pipe, PipeTransform } from '@angular/core';\nimport * as _ from \"underscore\";\n\n@Pipe({\n  name: 'values'\n})\nexport class ValuesPipe implements PipeTransform {\n\n  transform(value: any, args?: any): any {\n    return _.values(value);\n  }\n\n}\n\n```\n\n\n### 发布准备\n新建package.json\n```json\n{\n    \"name\": \"meepo-underscore\",\n    \"version\": \"2.0.2\",\n    \"repository\": \"https://github.com/meepobrother/meepo-underscore.git\",\n    \"author\": \"imeepos \u003c1037483576@qq.com\u003e\",\n    \"license\": \"MIT\",\n    \"private\": false,\n    \"scripts\": {\n        \"git\": \"git add . \u0026\u0026 git commit -m 'push to save' \u0026\u0026 git push origin master\"\n    },\n    \"peerDependencies\": {\n        \"@angular/core\": \"*\",\n        \"@angular/common\": \"*\",\n        \"rxjs\": \"*\",\n        \"underscore\": \"*\"\n    },\n    \"ngPackage\": {\n        \"$schema\": \"./node_modules/ng-packagr/ng-package.schema.json\",\n        \"dest\": \"../../../meepo/underscore\",\n        \"workingDirectory\": \"./.ng_build\",\n        \"lib\": {\n            \"entryFile\": \"./public_api.ts\"\n        }\n    }\n}\n```\n导出模块\n```ts\nimport { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MapPipe } from \"./map.pipe\";\nimport { ShufflePipe } from \"./shuffle.pipe\";\nimport { SamplePipe } from \"./sample.pipe\";\nimport { RangePipe } from \"./range.pipe\";\nimport { FlattenPipe } from \"./flatten.pipe\";\nimport { ValuesPipe } from \"./values.pipe\";\nimport { InvertPipe } from \"./invert.pipe\";\n\nexport const PIPES = [\n  MapPipe,\n  ShufflePipe,\n  SamplePipe,\n  RangePipe,\n  FlattenPipe,\n  ValuesPipe,\n  InvertPipe\n];\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [...PIPES],\n  exports: [...PIPES]\n})\nexport class UnderscoreModule {}\n\n```\n\n## 发布到npm\n\n```sh\nng-packagr -p ./src/app/shared/underscore/package.json\n```\n\n## 使用安装\n\n```sh\nyarn add meepo-underscore\n```\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\n\nimport { AppComponent } from './app.component';\nimport { RouterModule } from '@angular/router';\nimport { UnderscoreModule } from 'meepo-underscore';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    RouterModule.forRoot([]),\n    UnderscoreModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n### 总结\n本文介绍了 Angular 自定义管道pipe的方法，并发布到npm, 方便使用及管理。\n\n项目地址： https://github.com/meepobrother/meepo-underscore.git","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeepobrother%2Fmeepo-underscore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeepobrother%2Fmeepo-underscore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeepobrother%2Fmeepo-underscore/lists"}