การเชื่อมไปป์และการส่งพารามิเตอร์
รวมไปป์และส่งอาร์กิวเมนต์
การเชื่อมไปป์และการส่งพารามิเตอร์ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การส่งอาร์กิวเมนต์ให้ไปป์
ไปป์สามารถรับอาร์กิวเมนต์ต่อจากเครื่องหมายโคลอนได้ รูปแบบคือ {{ value | pipeName:arg1:arg2 }} อาร์กิวเมนต์แต่ละตัวคั่นด้วยเครื่องหมายโคลอนของตัวเอง
อาร์กิวเมนต์เดียว
ไปป์หลายชนิดรับอาร์กิวเมนต์หนึ่งตัว ตัวอย่างเช่น ไปป์ date รับสตริงรูปแบบวันที่
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->อาร์กิวเมนต์หลายตัว
ไปป์ slice รับดัชนีเริ่มต้นและดัชนีสิ้นสุด โดยส่งแต่ละค่าด้วยเครื่องหมายโคลอนของตัวเอง
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->อาร์กิวเมนต์แบบไดนามิก
อาร์กิวเมนต์สามารถเป็นคุณสมบัติของคอมโพเนนต์ ไม่จำเป็นต้องเป็นค่าคงที่เท่านั้น วิธีนี้ช่วยให้คุณเปลี่ยนพฤติกรรมของไปป์ได้แบบตอบสนองตามการเปลี่ยนแปลง
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;การเชื่อมไปป์คืออะไร
คุณสามารถเชื่อมไปป์ต่อกันได้ โดยให้เอาต์พุตของไปป์หนึ่งกลายเป็นอินพุตของไปป์ถัดไป ไปป์จะทำงานจากซ้ายไปขวา
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->ตัวอย่างการเชื่อมไปป์
ในตัวอย่างนี้ วันที่จะถูกจัดรูปแบบก่อน จากนั้นจึงแปลงเป็นตัวพิมพ์ใหญ่ ไปป์ date จะทำงานก่อน แล้วจึงเป็น uppercase
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->ลำดับมีความสำคัญ
ลำดับของไปป์ที่เชื่อมกันจะเปลี่ยนผลลัพธ์ การใช้ uppercase ก่อน slice หรือหลัง slice ให้ข้อความเดียวกันในกรณีนี้ แต่สำหรับไปป์ที่มีการแปลงข้อมูล ลำดับอาจมีผลอย่างมาก
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->การใช้อาร์กิวเมนต์ร่วมกับการเชื่อมไปป์
คุณสามารถใช้อาร์กิวเมนต์ร่วมกับการเชื่อมไปป์ได้อย่างอิสระ ไปป์แต่ละตัวยังคงได้รับเอาต์พุตจากไปป์ก่อนหน้าเป็นค่าของตน
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>การเชื่อมไปป์กับสกุลเงิน
จัดรูปแบบตัวเลขเป็นสกุลเงินก่อน แล้วจึงตัดช่องว่างส่วนเกินออก แม้จะไม่ใช่กรณีที่พบได้บ่อย แต่นี่แสดงให้เห็นว่าไปป์เป็นหน่วยการทำงานพื้นฐานที่นำมาประกอบกันได้
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->เคล็ดลับด้านความอ่านง่าย
การเชื่อมไปป์หลายตัวอาจทำให้อ่านยาก หากการเชื่อมต่อซับซ้อนขึ้น ลองคำนวณค่าในคอมโพเนนต์หรือสร้างไปป์แบบกำหนดเองแทน
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}ช่องว่างรอบไปป์
การเว้นวรรคก่อนและหลัง | และ : เป็นทางเลือก แต่แนะนำให้ทำเพื่อให้อ่านง่าย Angular จะละเว้นช่องว่างส่วนเกิน
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจของคุณเกี่ยวกับอาร์กิวเมนต์และการเชื่อมไปป์
สรุปทบทวน
คุณได้เรียนรู้การส่งอาร์กิวเมนต์หนึ่งตัวและหลายตัวด้วยเครื่องหมายโคลอน การใช้อาร์กิวเมนต์แบบไดนามิกจากคุณสมบัติของคอมโพเนนต์ และการเชื่อมไปป์เพื่อให้เอาต์พุตไหลจากซ้ายไปขวา
ถัดไป คุณจะสร้างไปป์แบบกำหนดเองของคุณเอง
คำถามที่พบบ่อย
บทเรียน “การเชื่อมไปป์และการส่งพารามิเตอร์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเชื่อมไปป์และการส่งพารามิเตอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเชื่อมไปป์และการส่งพารามิเตอร์”
รวมไปป์และส่งอาร์กิวเมนต์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเชื่อมไปป์และการส่งพารามิเตอร์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การใช้ไปป์ในตัว
- การเชื่อมไปป์และการส่งพารามิเตอร์
- การสร้างไปป์แบบกำหนดเอง
- ไปป์แบบบริสุทธิ์เทียบกับแบบไม่บริสุทธิ์