การสร้างไปป์แบบกำหนดเอง

ทำไมต้องใช้ไปป์แบบกำหนดเอง

ตัวตกแต่ง @Pipe

import { Pipe } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

การทำให้ใช้ PipeTransform ได้

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

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

เมธอด transform

transform(value: string): string {
  return value.trim();
}

การใช้งานไปป์ของคุณ

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

การรับอาร์กิวเมนต์

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

ค่าเริ่มต้นของอาร์กิวเมนต์

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

การจัดการค่า Null และ Undefined

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

ตัวอย่างไปป์ Truncate

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

การระบุชนิดค่าที่ส่งคืน

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

การลงทะเบียนในโมดูล (NgModule)

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

ตรวจสอบความเข้าใจ

สรุปทบทวน