2019-12-03

Web前端►框架►Angular

Angular中的管道

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/03/Angular%E4%B8%AD%E7%9A%84%E7%AE%A1%E9%81%93/

摘要

本文主要讲述了：

内置管道
自定义管道

正文

内置管道

示例：date管道

输入：

my-angular/src/app/app.component.html

1	<div>{{ birthday \| date }}</div>

my-angular/src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  birthday = new Date();
}

输出：

1
2
3

<app-root>
  <div>Nov 16, 2019</div>
</app-root>

示例：向date管道传递参数

输入：

my-angular/src/app/app.component.html

1	<div>{{ birthday \| date: "yyyy-MM-dd" }}</div>

输出：

1
2
3

<app-root>
  <div>2019-11-16</div>
</app-root>

示例：链式调用

输入：

my-angular/src/app/app.component.html

1	<div>{{ birthday \| date \| uppercase }}</div>

输出：

1
2
3

<app-root>
  <div>NOV 16, 2019</div>
</app-root>

自定义管道

注意：必须先在模块中引用自定义管道，而后才能在模块的组件中使用对应的管道

创建

示例：

在src/app/目录内创建名为pipes的目录
在src/app/pipes/目录内创建salary.pipe.ts、salary.pipe.spec.ts
在src/app.module.ts中引用SalaryPipe

1
2
3

#!/usr/bin/env bash

ng generate pipe pipes/salary

使用

示例：

输入：

my-angular/src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FooComponent } from './pages/foo/foo.component';
import { BarComponent } from './pages/bar/bar.component';

import { RegisterModule } from './modules/register/register.module';

import { SalaryPipe } from './pipes/salary.pipe';

@NgModule({
  declarations: [AppComponent, FooComponent, BarComponent, SalaryPipe],
  imports: [BrowserModule, FormsModule, AppRoutingModule, RegisterModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

my-angular/src/app/app.component.html

1	<div>{{ foo \| salary }}</div>

my-angular/src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  foo = 1234.5678;
}

my-angular/src/app/pipes/salary.pipe.ts

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

@Pipe({
  name: 'salary',
})
export class SalaryPipe implements PipeTransform {
  transform(value: number, ...args: unknown[]): number {
    // 保留两位小数
    const output = Math.round(value * 100) / 100;
    return output;
  }
}

输出：

1
2
3

<app-root>
  <div>1234.57</div>
</app-root>

管道也能用于列表渲染中

示例：

my-angular/src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FooComponent } from './pages/foo/foo.component';
import { BarComponent } from './pages/bar/bar.component';

import { RegisterModule } from './modules/register/register.module';

import { SalaryPipe } from './pipes/salary.pipe';
import { IsVipPipe } from './pipes/is-vip.pipe';

@NgModule({
  declarations: [
    AppComponent,
    FooComponent,
    BarComponent,
    SalaryPipe,
    IsVipPipe,
  ],
  imports: [BrowserModule, FormsModule, AppRoutingModule, RegisterModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

my-angular/src/app/app.component.html

<div>
  <div *ngFor="let item of jobList | isVip; trackBy: jobTrackBy">
    <div>{{ item.jobId }}</div>
    <div>{{ item.jobName }}</div>
    <div>{{ item.salary }}</div>
    <div>{{ item.companyName }}</div>
  </div>
</div>

my-angular/src/app/app.component.ts

import { Component } from '@angular/core';
import { Job } from './types/Job';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  jobList: Job[] = [
    {
      jobId: 1,
      jobName: '会计',
      salary: 1000,
      companyName: 'A有限责任公司',
      isVip: 1,
    },
    {
      jobId: 2,
      jobName: '销售',
      salary: 2000,
      companyName: 'B有限责任公司',
      isVip: 0,
    },
    {
      jobId: 3,
      jobName: '主管',
      salary: 3000,
      companyName: 'B有限责任公司',
      isVip: 0,
    },
  ];

  jobTrackBy(index: number, item: Job) {
    return item.jobId;
  }
}

my-angular/src/app/types/Job.ts

interface Job {
  jobId: number;
  jobName: string;
  salary: number;
  companyName: string;
  [key: string]: any;
}

export { Job };

my-angular/src/app/pipes/isVip.pipe.ts

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

@Pipe({
  name: 'isVip',
})
export class IsVipPipe implements PipeTransform {
  transform(value: Job[], ...args: unknown[]): Job[] {
    // 由于Angular启用了TypeScript中的noPropertyAccessFromIndexSignature
    // 因此只能使用下标运算符来访问那些基于索引签名扩展的属性
    return value.filter((item) => item['isVip']);
  }
}