0Pricing
Angular Academy · บทเรียน

TemplateRef และ ViewContainerRef

เรนเดอร์แม่แบบแบบไดนามิก

TemplateRef และ ViewContainerRef เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

การแสดงผลแบบสั่งการ

บางครั้งคุณจำเป็นต้องแสดงเนื้อหาด้วยโปรแกรมแทนการประกาศแบบชัดแจ้ง Angular มี TemplateRef และ ViewContainerRef สำหรับการควบคุมระดับต่ำนี้

TemplateRef

TemplateRef คือตัวอ้างอิงไปยัง <ng-template> ซึ่งแทนมาร์กอัปที่คุณสามารถสร้างอินสแตนซ์ได้ภายหลัง

tpl = viewChild.required<TemplateRef<unknown>>('tpl');

ViewContainerRef

ViewContainerRef คือตำแหน่งใน DOM ที่คุณสามารถแนบมุมมองได้ ให้ฉีดสิ่งนี้เพื่อควบคุมสิ่งที่จะถูกแสดงผลที่ตำแหน่งนั้น

private vcr = inject(ViewContainerRef);

createEmbeddedView

นำทั้งสองอย่างมารวมกัน: createEmbeddedView จะสร้างอินสแตนซ์ของ TemplateRef ลงใน ViewContainerRef

this.vcr.createEmbeddedView(this.tpl());

การส่งบริบท

คุณสามารถส่งออบเจ็กต์บริบทเป็นอาร์กิวเมนต์ที่สอง ซึ่งเข้าถึงได้ผ่านตัวแปร let-

this.vcr.createEmbeddedView(this.tpl(), {
  $implicit: 'Hello',
  count: 3
});

การล้างมุมมอง

ViewContainerRef.clear() จะนำมุมมองทั้งหมดที่สร้างโดยมันออก นี่คือวิธีเปิดหรือปิดเนื้อหาแบบไดนามิก

this.vcr.clear();

คำสั่งเชิงโครงสร้างแบบกำหนดเอง

รูปแบบนี้เป็นพื้นฐานของคำสั่งเชิงโครงสร้างแบบกำหนดเอง คำสั่งจะฉีดตัวอ้างอิงทั้งสองและแสดงผลตามเงื่อนไข

@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
  private tpl = inject(TemplateRef<unknown>);
  private vcr = inject(ViewContainerRef);
}

การตอบสนองต่ออินพุต

ตัวกำหนดค่าบนอินพุตของคำสั่งจะขับเคลื่อนการสร้างหรือล้างมุมมอง ทำให้มุมมองปรากฏขึ้นหรือหายไป

@Input() set appUnless(condition: boolean) {
  if (!condition) {
    this.vcr.createEmbeddedView(this.tpl);
  } else {
    this.vcr.clear();
  }
}

การแทรกตามดัชนี

createEmbeddedView รับดัชนีเพื่อควบคุมลำดับการแทรกท่ามกลางมุมมองพี่น้อง

this.vcr.createEmbeddedView(this.tpl(), {}, 0);

createComponent

ViewContainerRef ยังสามารถสร้างคอมโพเนนต์แบบไดนามิกได้ด้วย createComponent ซึ่งเป็นสิ่งทดแทนสมัยใหม่ของ ComponentFactoryResolver

const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');

การล้างทรัพยากร

มุมมองที่สร้างแบบสั่งการต้องได้รับการล้าง การทำลายคอมโพเนนต์โฮสต์จะล้าง ViewContainerRef ให้โดยอัตโนมัติ แต่เมื่อสลับด้วยตนเอง ให้เรียกใช้ clear()

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

ทดสอบความเข้าใจของคุณเกี่ยวกับการแสดงผลแบบสั่งการ

สรุปทบทวน

คุณได้เรียนรู้ว่า TemplateRef เป็นตัวอ้างอิงไปยังมาร์กอัปของแม่แบบ ViewContainerRef เป็นจุดแทรกใน DOM และ createEmbeddedView จะแสดงผลสิ่งหนึ่งลงในอีกสิ่งหนึ่ง ทั้งสองอย่างนี้เป็นพื้นฐานของคำสั่งเชิงโครงสร้างแบบกำหนดเองและคอมโพเนนต์แบบไดนามิก

คำถามที่พบบ่อย

บทเรียน “TemplateRef และ ViewContainerRef” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “TemplateRef และ ViewContainerRef” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “TemplateRef และ ViewContainerRef”

เรนเดอร์แม่แบบแบบไดนามิก คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “TemplateRef และ ViewContainerRef” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การฉายเนื้อหาแบบช่องเดียว
  2. การฉายหลายช่องด้วย select
  3. ng-template และ ng-container
  4. TemplateRef และ ViewContainerRef
← กลับไปที่ Angular Academy