ng-template และ ng-container
กำหนดและโฮสต์ส่วนย่อยของแม่แบบ
ng-template และ ng-container เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
แม่แบบที่ไม่แสดงผล
<ng-template> กำหนดส่วนหนึ่งของมาร์กอัปที่จะไม่แสดงผลจนกว่าจะมีสิ่งใดสร้างอินสแตนซ์ของมันอย่างชัดเจน สิ่งนี้เป็นพื้นฐานของคำสั่งเชิงโครงสร้าง เช่น *ngIf
การกำหนดแม่แบบ
เนื้อหาภายใน <ng-template> จะยังไม่ทำงาน คุณต้องกำหนดตัวแปรอ้างอิงให้กับมันเพื่อใช้งานในที่อื่น
<ng-template #empty>
<p>No items found.</p>
</ng-template>การแสดงผลด้วย ngTemplateOutlet
ใช้ ngTemplateOutlet เพื่อแสดงผลแม่แบบตามตัวอ้างอิง
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>เหตุใดจึงต้องใช้ ng-container
<ng-container> เป็นองค์ประกอบจัดกลุ่มเชิงตรรกะที่ไม่สร้าง DOM ช่วยให้คุณใช้คำสั่งหรือจัดกลุ่มโหนดได้โดยไม่ต้องเพิ่มองค์ประกอบตัวครอบลงใน DOM
การหลีกเลี่ยง div ตัวครอบ
หากไม่มี ng-container คุณอาจเพิ่ม <div> ที่ไม่จำเป็นเพียงเพื่อเป็นที่ติดตั้งคำสั่ง ng-container จะหายไปจากผลลัพธ์ที่แสดงผล
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>การจัดกลุ่มการควบคุมการไหล
ng-container เหมาะอย่างยิ่งสำหรับครอบบล็อกการควบคุมการไหลรูปแบบใหม่โดยไม่เพิ่ม DOM
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>บริบทของแม่แบบ
แม่แบบสามารถรับออบเจ็กต์บริบท ซึ่งเปิดค่าให้ใช้งานผ่านตัวแปร let-
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>ค่าบริบทเริ่มต้น
ค่าบริบทพิเศษ $implicit จะผูกกับตัวแปร let- ที่ไม่มีคีย์กำกับ
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>แม่แบบเป็นสิ่งชั้นหนึ่ง
#ref บน <ng-template> คือ TemplateRef คุณสามารถส่งต่อเป็น @Input เพื่อให้คอมโพเนนต์เปิดโอกาสให้ผู้ใช้คอมโพเนนต์ปรับแต่งบางส่วนของส่วนติดต่อผู้ใช้ได้
emptyTemplate = input<TemplateRef<unknown>>();ng-container ในฐานะโฮสต์
ng-container ยังมีประโยชน์ในฐานะโฮสต์จุดแสดงผลสำหรับคอมโพเนนต์หรือแม่แบบแบบไดนามิก โดยช่วยให้ DOM สะอาด
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>ควรใช้สิ่งใดเมื่อใด
ng-template: มาร์กอัปที่เลื่อนการแสดงผลหรือใช้ซ้ำได้ ng-container: ใช้จัดกลุ่มและเป็นโฮสต์ของคำสั่งโดยไม่เพิ่ม DOM ทั้งสองอย่างมักทำงานร่วมกัน
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจของคุณเกี่ยวกับ ng-template และ ng-container
สรุปทบทวน
คุณได้เรียนรู้ว่า <ng-template> ใช้เก็บมาร์กอัปที่ยังไม่ทำงานและสามารถสร้างอินสแตนซ์ได้ ซึ่งแสดงผลผ่าน ngTemplateOutlet โดยอาจมีบริบทเพิ่มเติม และ <ng-container> ใช้จัดกลุ่มโหนดหรือเป็นโฮสต์ของคำสั่งโดยไม่เพิ่ม DOM
คำถามที่พบบ่อย
บทเรียน “ng-template และ ng-container” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ng-template และ ng-container” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ng-template และ ng-container”
กำหนดและโฮสต์ส่วนย่อยของแม่แบบ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ng-template และ ng-container” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การฉายเนื้อหาแบบช่องเดียว
- การฉายหลายช่องด้วย select
- ng-template และ ng-container
- TemplateRef และ ViewContainerRef