angular的管道（Pipe）

angular中的管道就相当于vue中的过滤器。

环境准备

创建一个angular应用

运行ng n ngPr01 --standalone=false命令创建一个angular应用。
项目创建成功以后，文件布局如下：

自动生成的package.json文件的内容：

{
  "name": "ng-pr01",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/platform-browser": "^18.1.0",
    "@angular/platform-browser-dynamic": "^18.1.0",
    "@angular/router": "^18.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.4",
    "@angular/cli": "^18.1.4",
    "@angular/compiler-cli": "^18.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"
  }
}

切换到项目目录下面，执行ng s -o命令，或者npm run start命令启动服务器：

把根组件html文件的内容修改为如下：

展示：

创建一个组件

执行命令ng g c myc01创建一个组件：

在根组件中显示刚刚创建的组件：

系统管道举例

转换为大写的管道

转换为小写的管道

每个单词首字母大写的管道

转换为百分数的管道

百分数还可以控制整数位、小数位的位数：

与钱有关系的管道

使用人民币的符号：

日期管道

时间戳

时间戳转换为日期

通过参数定制日期格式

自定义管道

执行命令ng g c myc02创建一个新的组件：

在根组件中加载刚刚创建好的组件：

生成自定义管道的命令为：ng g p 管道名。例如ng g p gender：

生成的管道文件gender.pipe.ts初始内容为：

将管道文件修改为如下，打印看看内容：

生成管道以后，要重启服务器，重启以后，到浏览器控制台查看：

修改后的管道文件内容为：

展示：

下面给自定义管道定制可选参数：

展示效果：