angular-pipes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Pipes

Version: Angular 21 (2025) Tags: Pipes, Transform, Format, Async

References: Pipes Guide • API

版本： Angular 21 (2025) 标签： Pipes, 转换, 格式化, 异步

参考资料： Pipes指南 • API

API Changes

API变更

This section documents recent version-specific API changes.

NEW: Standalone pipes — All pipes can be standalone
NEW: Signal-based pipes — Pipes can use signals
NEW: inject() in pipes — Use functional DI in pipes
DEPRECATED: Impure pipes — Avoid for performance; use pure pipes

本节记录了近期特定版本的API变更内容。

新增：独立管道 —— 所有管道都可设置为独立类型
新增：基于Signal的管道 —— 管道可使用signals
新增：管道中支持inject() —— 可在管道内使用函数式DI
已废弃：非纯管道 —— 出于性能考虑请避免使用，优先选择纯管道

Best Practices

最佳实践

Use pure pipes for stateless transformations

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

@Pipe({
  name: 'capitalize',
  standalone: true
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

Use pipes in templates

@Component({
  template: `
    <p>{{ name | capitalize }}</p>
    <p>{{ price | currency:'USD' }}</p>
    <p>{{ items | json }}</p>
  `
})
export class MyComponent {}

Use pipe with parameters

@Pipe({ name: 'slice' })
export class SlicePipe implements PipeTransform {
  transform(value: string, start: number, end?: number): string {
    return value.slice(start, end);
  }
}

// Usage: {{ text | slice:0:10 }}

Use async pipe for observables

@Component({
  template: `
    @if (user$ | async; as user) {
      <p>{{ user.name }}</p>
    }
  `
})
export class UserComponent {
  user$ = this.userService.getUser();
}

Use impure pipes only when necessary

@Pipe({
  name: 'myPipe',
  pure: false // Impure - runs on every change detection
})
export class ImpurePipe implements PipeTransform {}

Use KeyValue pipe for object iteration

@Component({
  template: `
    @for (item of object | keyvalue; track item.key) {
      {{ item.key }}: {{ item.value }}
    }
  `
})
export class MyComponent {
  object = { a: 1, b: 2 };
}

Use Json pipe for debugging

@Component({
  template: `
    <pre>{{ object | json }}</pre>
  `
})
export class DebugComponent {}

Chain pipes

@Component({
  template: `
    {{ name | uppercase | slice:0:5 }}
  `
})
export class ChainedPipeComponent {}

Use standalone pipes in imports

@Component({
  standalone: true,
  imports: [DatePipe, CurrencyPipe, CapitalizePipe],
  template: `{{ date | date }}`
})
export class MyComponent {}

Use inject() in pipes

@Pipe({ name: 'translate', standalone: true })
export class TranslatePipe implements PipeTransform {
  private service = inject(TranslateService);

  transform(key: string): string {
    return this.service.get(key);
  }
}

无状态转换场景使用纯管道

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

@Pipe({
  name: 'capitalize',
  standalone: true
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

在模板中使用管道

@Component({
  template: `
    <p>{{ name | capitalize }}</p>
    <p>{{ price | currency:'USD' }}</p>
    <p>{{ items | json }}</p>
  `
})
export class MyComponent {}

使用带参数的管道

@Pipe({ name: 'slice' })
export class SlicePipe implements PipeTransform {
  transform(value: string, start: number, end?: number): string {
    return value.slice(start, end);
  }
}

// Usage: {{ text | slice:0:10 }}

针对observables使用async管道

@Component({
  template: `
    @if (user$ | async; as user) {
      <p>{{ user.name }}</p>
    }
  `
})
export class UserComponent {
  user$ = this.userService.getUser();
}

仅在必要时使用非纯管道

@Pipe({
  name: 'myPipe',
  pure: false // Impure - runs on every change detection
})
export class ImpurePipe implements PipeTransform {}

遍历对象时使用KeyValue管道

@Component({
  template: `
    @for (item of object | keyvalue; track item.key) {
      {{ item.key }}: {{ item.value }}
    }
  `
})
export class MyComponent {
  object = { a: 1, b: 2 };
}

使用Json管道进行调试

@Component({
  template: `
    <pre>{{ object | json }}</pre>
  `
})
export class DebugComponent {}

链式调用管道

@Component({
  template: `
    {{ name | uppercase | slice:0:5 }}
  `
})
export class ChainedPipeComponent {}

在imports中引入独立管道

@Component({
  standalone: true,
  imports: [DatePipe, CurrencyPipe, CapitalizePipe],
  template: `{{ date | date }}`
})
export class MyComponent {}

在管道中使用inject()

@Pipe({ name: 'translate', standalone: true })
export class TranslatePipe implements PipeTransform {
  private service = inject(TranslateService);

  transform(key: string): string {
    return this.service.get(key);
  }
}