Angular Academy · บทเรียน

การค้นหามุมมองด้วย viewChild

ค้นหาองค์ประกอบลูกในรูปแบบสัญญาณ

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

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

การคิวรีมุมมอง

คอมโพเนนต์มักต้องการการอ้างอิงไปยังองค์ประกอบหรือคอมโพเนนต์ลูกในแม่แบบของตน Angular รุ่นใหม่มีฟังก์ชันคิวรีที่ใช้สัญญาณอย่าง viewChild()

การประกาศ viewChild

เรียกใช้ viewChild() พร้อมชื่อการอ้างอิงแม่แบบหรือชนิดของคอมโพเนนต์ ผลลัพธ์ที่ได้คือสัญญาณ

import { Component, viewChild, ElementRef } from "@angular/core";

@Component({
  selector: "app-form",
  template: "<input #box>"
})
export class FormComponent {
  box = viewChild<ElementRef>("box");
}

การอ่านคิวรี

เช่นเดียวกับสัญญาณทั้งหมด ให้อ่านคิวรีมุมมองด้วยการเรียกใช้คิวรีนั้น คิวรีจะส่งคืนองค์ประกอบที่ตรงกันหรือค่า undefined จนกว่ามุมมองจะพร้อม

focus() {
  this.box()?.nativeElement.focus();
}

การคิวรีคอมโพเนนต์ลูก

ส่งคลาสคอมโพเนนต์เพื่อรับการอ้างอิงที่มีชนิดตรงกับอินสแตนซ์ของคอมโพเนนต์ลูก

import { viewChild } from "@angular/core";

child = viewChild(ChildComponent);

run() {
  this.child()?.doSomething();
}

คิวรีมุมมองที่จำเป็น

ใช้ viewChild.required() เมื่อองค์ประกอบที่คิวรีต้องมีอยู่ สัญญาณจะไม่สามารถเป็นค่า null ได้

box = viewChild.required<ElementRef>("box");

focus() {
  this.box().nativeElement.focus(); // no optional chaining
}

การคิวรีหลายองค์ประกอบ

viewChildren() ส่งคืนสัญญาณที่เก็บอาร์เรย์แบบอ่านอย่างเดียวของผลลัพธ์ที่ตรงกันทั้งหมด

import { viewChildren } from "@angular/core";

items = viewChildren(ItemComponent);

count() {
  return this.items().length;
}

คิวรีจะได้ผลลัพธ์เมื่อใด

คิวรีมุมมองแบบสัญญาณจะได้ผลลัพธ์หลังจากมุมมองเริ่มต้นแล้ว การอ่านคิวรีภายใน effect ช่วยให้คุณดำเนินการได้เมื่อคิวรีพร้อมใช้งาน

constructor() {
  effect(() => {
    const el = this.box();
    if (el) el.nativeElement.focus();
  });
}

viewChild เทียบกับมัณฑนากร ViewChild

สัญญาณ viewChild() มาแทนมัณฑนากรแบบดั้งเดิมอย่าง @ViewChild โดยผสานการทำงานเข้ากับสัญญาณ และช่วยหลีกเลี่ยงการจัดการจังหวะของวงจรชีวิตด้วยตนเองได้ในหลายกรณี

// classic:
@ViewChild("box") box!: ElementRef;

// modern:
box = viewChild<ElementRef>("box");

การอ่านโทเค็นเฉพาะ

ตัวเลือก read ช่วยให้คุณคิวรีโทเค็นอื่นจากองค์ประกอบที่ตรงกันได้ เช่น คำสั่งหรือ ElementRef

tooltip = viewChild("trigger", { read: TooltipDirective });

contentChild สำหรับเนื้อหาที่ฉาย

หากต้องการทำงานกับเนื้อหาที่ฉายแทนมุมมองของคอมโพเนนต์เอง ให้ใช้คิวรีคู่กันอย่าง contentChild() และ contentChildren()

import { contentChild } from "@angular/core";

header = contentChild(HeaderComponent);

การเลือกคิวรีที่เหมาะสม

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

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

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

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

สรุป

สัญญาณ viewChild() ใช้คิวรีองค์ประกอบและคอมโพเนนต์ลูกในมุมมองของคอมโพเนนต์ ใช้ viewChild.required() สำหรับเป้าหมายที่รับประกันว่ามีอยู่ ใช้ viewChildren() สำหรับกลุ่มข้อมูล ใช้ตัวเลือก read สำหรับโทเค็นเฉพาะ และใช้ contentChild() สำหรับเนื้อหาที่ฉาย

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

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

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

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

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

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

บทเรียน “การค้นหามุมมองด้วย viewChild” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การค้นหามุมมองด้วย viewChild”

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

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

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

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

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

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

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

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

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