Angular Academy · บทเรียน

การฉายเนื้อหาแบบช่องเดียว

ฉายเนื้อหาด้วย ng-content

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

การฉายเนื้อหาคืออะไร

การฉายเนื้อหา ช่วยให้คอมโพเนนต์รับมาร์กอัปจากคอมโพเนนต์แม่และแสดงผลภายในแม่แบบของตนเอง ซึ่งเทียบเท่ากับ "ช่อง" ของเว็บคอมโพเนนต์ใน Angular

คอมโพเนนต์แม่เขียนเนื้อหาไว้ระหว่างแท็กของคอมโพเนนต์ แล้วคอมโพเนนต์จะกำหนดว่าเนื้อหานั้นจะปรากฏที่ใด

เหตุผลที่ต้องใช้

ตัวครอบที่นำกลับมาใช้ซ้ำได้ เช่น การ์ด กล่องโต้ตอบ และแผง ไม่ทราบเนื้อหาล่วงหน้า การฉายเนื้อหาจึงทำให้ตัวครอบเหล่านี้เป็นคอนเทนเนอร์ที่ยืดหยุ่น

สร้างการ์ดเพียงครั้งเดียว แล้วเติมเนื้อหาใดก็ได้
เก็บตรรกะการจัดวางไว้ในคอมโพเนนต์
เก็บเนื้อหาไว้ในผู้ใช้คอมโพเนนต์

องค์ประกอบ ng-content

องค์ประกอบ <ng-content> ทำเครื่องหมายตำแหน่งที่จะวางเนื้อหาที่ฉาย การตั้งค่าแบบช่องเดียวใช้ <ng-content> เพียงหนึ่งรายการโดยไม่มีแอตทริบิวต์ select

@Component({
  selector: 'app-card',
  template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}

การใช้คอมโพเนนต์

ทุกสิ่งที่คอมโพเนนต์แม่วางไว้ระหว่างแท็กของคอมโพเนนต์จะถูกฉายเข้าไปในช่อง

<app-card>
  <h2>Hello</h2>
  <p>This text is projected into the card.</p>
</app-card>

ช่องเดียว = จุดแสดงผลเดียว

เมื่อใช้ช่องเดียวที่ไม่มีชื่อ โหนดที่ฉาย<熟strong>ทั้งหมดจะเข้าไปใน <ng-content> เดียว ไม่มีการกรอง และลำดับจะคงเดิมตามที่คอมโพเนนต์แม่เขียนไว้ทุกประการ

เนื้อหาเริ่มต้น

คุณสามารถใส่มาร์กอัปสำรองไว้ภายใน <ng-content> ได้ Angular สมัยใหม่จะแสดงเนื้อหาเริ่มต้นนี้เฉพาะเมื่อผู้ใช้คอมโพเนนต์ไม่ได้ฉายสิ่งใดเข้าไปในช่องนั้น

<div class="card">
  <ng-content>No content provided.</ng-content>
</div>

การกำหนดสไตล์ให้เนื้อหาที่ฉาย

เนื้อหาที่ฉายเป็นของมุมมองของคอมโพเนนต์แม่ จึงใช้สไตล์ของคอมโพเนนต์แม่ ไม่ใช่ของการ์ด หากต้องการเข้าถึงโหนดที่ฉายจากการ์ด ให้ใช้ ::ng-deep อย่างประหยัด หรืออาศัยสไตล์ส่วนกลาง

เนื้อหากับมุมมอง

Angular แยกความแตกต่างระหว่างโหนดลูกในเนื้อหา (ที่ถูกฉายเข้ามา) กับโหนดลูกในมุมมอง (ที่ประกาศไว้ในแม่แบบ) เรื่องนี้สำคัญสำหรับการสืบค้น เช่น contentChild กับ viewChild

icon = contentChild(IconComponent);

วงจรชีวิต: ngAfterContentInit

เนื้อหาที่ฉายจะพร้อมใช้งานหลังจาก ngAfterContentInit() ทำงานแล้ว โปรดใช้สิ่งนี้ (หรือ ngAfterContentChecked) เพื่ออ่านโหนดลูกในเนื้อหาอย่างปลอดภัย

ngAfterContentInit() {
  console.log('Projected content ready');
}

ตัวอย่างแผงจริง

นี่คือตัวอย่างแผงที่นำกลับมาใช้ซ้ำได้อย่างสมบูรณ์ ผู้ใช้คอมโพเนนต์ควบคุมเนื้อหาภายในทั้งหมด ส่วนแผงควบคุมโครงร่างภายนอก

@Component({
  selector: 'app-panel',
  template: '<section class="panel"><ng-content></ng-content></section>',
  styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}

ข้อผิดพลาดที่พบบ่อย

การวาง <ng-content> ที่ไม่มีชื่อเดียวกันซ้ำสองครั้งไม่ได้ทำให้เนื้อหาซ้ำ Angular จะฉายเนื้อหาเข้าไปยังช่องที่ตรงกันช่องสุดท้ายเท่านั้น หากต้องการหลายพื้นที่ ให้ใช้การฉายเนื้อหาหลายช่อง

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

ทดสอบความเข้าใจของคุณเกี่ยวกับการฉายเนื้อหาแบบช่องเดียว

สรุปทบทวน

คุณได้เรียนรู้ว่าการฉายเนื้อหาใช้ <ng-content> เพื่อแสดงมาร์กอัปที่คอมโพเนนต์แม่ส่งเข้ามาภายในคอมโพเนนต์ การฉายแบบช่องเดียวใช้จุดแสดงผลที่ไม่มีชื่อเพียงหนึ่งจุด เนื้อหาที่ฉายเป็นของมุมมองของคอมโพเนนต์แม่ และจะพร้อมใช้งานใน ngAfterContentInit

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

บทเรียน “การฉายเนื้อหาแบบช่องเดียว” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การฉายเนื้อหาแบบช่องเดียว”

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

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

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

บทเรียน “การฉายเนื้อหาแบบช่องเดียว” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Angular Academy