angular 管道应用

最新推荐文章于 2025-06-14 09:00:06 发布

chelen_jak

最新推荐文章于 2025-06-14 09:00:06 发布

阅读量217

点赞数

分类专栏：实用 Angular2 Ionic3

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

Angular2

139 篇文章

订阅专栏

本文详细介绍如何在Angular项目中创建和使用自定义管道，包括性别类型转换和日期格式化两个实用案例，展示了管道在提高代码复用性和可读性方面的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处：https://www.cnblogs.com/LWJ-booke/p/9512126.html

1、创建filter文件

import { Pipe, PipeTransform } from '@angular/core';
import moment from 'moment'

// 管道--性别
@Pipe({name: 'sexType'})
export class sexType implements PipeTransform {
  transform(value) {
    if(value === 'boy') {
      return '男'
    } else if (value === 'girl') {
      return '女'
    } else {
      return '--'
    }
  }
}

// 时间格式
@Pipe({name: 'formatDate'})
export class formatDate implements PipeTransform {
  transform(value, formatString = 'YYYY年MM月DD日') {
    if (moment(value).isValid()) {
      return moment(value).format(formatString)
    }
    return '--'
  }
}

2、在app.module.ts导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { sexType, formatDate } from './filter/filter';

@NgModule({
  declarations: [
    sexType,
    formatDate
  ],
  imports: [
    NgbModule.forRoot(),
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }

3、页面使用

<div class="row">
  <div class="col-md-10 Title"><span>事业发展</span></div>
  <div class="col-md-12">
    <p *ngFor="let v of userList">
      <span>{{v.name}}--{{v.age}}--{{v.sex | sexType}}</span>
      <button ng-click='sayHello()'>修改</button>
    </p>
  </div>
</div>

4、不好之处，请指教