Angular Academy · บทเรียน

การฉายหลายช่องด้วย select

ฉายเนื้อหาไปยังช่องที่มีชื่อกำกับ

บทเรียน 2 จาก 413 ขั้นตอน

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

หลายช่อง

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

แอตทริบิวต์ select

select รับตัวเลือก CSS แต่ละรายการของ <ng-content select="..."> จะฉายเฉพาะโหนดที่ตรงกับตัวเลือกนั้น

<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>

การเลือกตามแอตทริบิวต์

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

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}

การใช้ช่องที่มีชื่อ

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

<app-card>
  <h2 header>Title</h2>
  <p body>Some body text here.</p>
</app-card>

การเลือกตามองค์ประกอบหรือคลาส

คุณยังสามารถเลือกตามชื่อองค์ประกอบหรือคลาส CSS ได้

<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>

ช่องรับทั้งหมด

<ng-content> ที่ไม่มี select จะรับทุกสิ่งที่ไม่ตรงกับช่องที่มีชื่อ ให้วางช่องนี้ไว้ท้ายสุดเพื่อใช้เป็นทางเลือกสำรอง

<ng-content select="[header]"></ng-content>
<ng-content></ng-content>

ลำดับมีความสำคัญ

Angular ประเมินช่องต่าง ๆ ตามลำดับในแม่แบบ โหนดที่ฉายแต่ละโหนดจะไปยังช่องแรกที่ตรงกัน ให้วางช่องรับทั้งหมดไว้หลังตัวเลือกเฉพาะ เพื่อไม่ให้ช่องนี้รับทุกอย่างไป

การรวมตัวเลือก

ตัวเลือก CSS สามารถนำมารวมกันได้ เช่น select="button[primary]" จะเลือกองค์ประกอบปุ่มที่มีแอตทริบิวต์ primary

<ng-content select="button[primary]"></ng-content>

คอมโพเนนต์จัดวาง

นี่คือการ์ดที่มีช่องส่วนหัว เนื้อหา และส่วนท้าย รวมทั้งช่องรับทั้งหมด

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<section><ng-content></ng-content></section>' +
    '<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}

แต่ละโหนดถูกฉายเพียงครั้งเดียว

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

การกำหนดสไตล์แยกตามช่อง

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

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

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

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

คุณได้เรียนรู้การสร้างคอมโพเนนต์หลายช่องด้วย <ng-content select="..."> ตัวเลือกสามารถกำหนดเป้าหมายเป็นแอตทริบิวต์ องค์ประกอบ หรือคลาสได้ ช่องที่ไม่มีตัวเลือกคือช่องรับทั้งหมด และลำดับจะเป็นตัวกำหนดว่าช่องใดได้รับเลือก

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 38
บทเรียน: 144

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

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

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

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

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

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

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

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

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

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

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

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

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