Pipes แปลงข้อมูล เพื่อแสดงผล โดยตรงในเทมเพลต โดยใช้ตัวดำเนิน | ช่วยให้คุณจัดรูปแบบค่า (วันที่ สกุลเงิน ข้อความ) โดยไม่เปลี่ยนข้อมูลพื้นฐานหรือเขียนตรรกะการแปลงในส่วนประกอบ
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
ค่าทางด้านซ้ายถูกส่งผ่าน pipe อาร์กิวเมนต์ตามด้วยเครื่องหมายทวิภาค (date:'longDate').
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- pipes apply left to right -->
<!-- subscribes to an Observable/Promise and auto-unsubscribes -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
async มีความสำคัญเป็นพิเศษ: มันสมัครสมาชิก Observable (เช่น ผลลัพธ์ HTTP) แสดงค่าที่ปล่อยออกมา และ ยกเลิกการสมัครสมาชิกโดยอัตโนมัติ เมื่อส่วนประกอบถูกทำลาย — ป้องกันการรั่วไหลของหน่วยความจำโดยไม่ต้องจัดการสมัครสมาชิกด้วยตนเอง
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "truncate" })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20): string {
return value.length > limit ? value.slice(0, limit) + "…" : value;
}
}
// usage: {{ longText | truncate:50 }}
Pure (default): re-runs only when the input REFERENCE changes → efficient (cached)
Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering)
Pipes บริสุทธิ์จะถูกแคชและคำนวณเฉพาะเมื่อการป้อนข้อมูลเปลี่ยนแปลง — ทำให้ประสิทธิภาพสูง
Pipes เก็บการจัดรูปแบบข้อมูลแบบประกาศและในเทมเพลตที่มันอยู่ แยกจากตรรกะส่วนประกอบ — นำกลับมาใช้ใหม่ได้ เชื่อมโยงได้ และ (เมื่อบริสุทธิ์) มีประสิทธิภาพ
Pipes ที่สร้างขึ้นมาแล้วครอบคลุมการจัดรูปแบบทั่วไป pipes ที่กำหนดเองจัดการกับการแปลงเฉพาะแอปพลิเคชัน และ pipe async เป็นวิธีที่ idiomatik ไม่มีการรั่วไหล ในการแสดง Observable ข้อมูล — รูปแบบที่คุณจะใช้อยู่เสมอใน Angular