5 Angular管道（自定义）

1 代码结构

 2 myc02.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc02',
  templateUrl: './myc02.component.html',
  styleUrls: ['./myc02.component.css']
})
export class Myc02Component implements OnInit {

  emps = [
    { name: '刘备', age: 37, sex: 1 },
    { name: '孙尚香', age: 18, sex: 0 },
    { name: '吕布', age: 31, sex: 1 },
    { name: '貂蝉', age: 19, sex: 0 },
  ];
  constructor() { }

  ngOnInit(): void {
  }

}

3 gender.pipe.ts

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

@Pipe({
  name: 'gender'
})
export class GenderPipe implements PipeTransform {
  // {{item.sex|gender:'xxx'}}
  //固定的管道写法{{value|管道名}}
  // value就会固定的传递到下方transform方法的参数1中，
  transform(value: any, lang = 'zh') {
    console.log(value);
    if (lang == 'en') {
      if (value == 0) return 'Female';
      else return 'Male';
    } else {
      if (value == 0) return '女';
      else return '男';
    }
  }
}

4 myc02.component.html

<p>myc02 works!</p>

<!--自定义管道 pipe-->
<table border="1">
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>性别(EN)</td>
    </tr>
    <tr *ngFor="let item of emps; let i=index">
        <td>{{i+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <!--制作gender管道
        生成自定义管道的命令：ng g p 管道名
        例如：ng g p gender-->
        <td>{{item.sex|gender}}</td>
        <td>{{item.sex|gender:"en"}}</td>
    </tr>
</table>

5 效果图