Angular Academy · บทเรียน

ฮุก AfterView และ AfterContent

เรียกใช้ตรรกะหลังจากเริ่มต้นมุมมองและเนื้อหา

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

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

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

Angular แยกความแตกต่างระหว่างมุมมองของคอมโพเนนต์ (แม่แบบของคอมโพเนนต์เอง) กับเนื้อหาที่แทรกเข้ามาผ่าน ng-content โดยแต่ละส่วนจะมีฮุกที่ทำงานแยกกัน

AfterViewInit

ฮุก AfterViewInit จะทำงานหนึ่งครั้งหลังจากมุมมองของคอมโพเนนต์และมุมมองลูกถูกเริ่มต้นอย่างสมบูรณ์แล้ว จึงเป็นเวลาที่เหมาะสมสำหรับเข้าถึงมุมมองลูก

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

export class DemoComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log("view ready");
  }
}

การเข้าถึง ViewChild

การอ้างอิง @ViewChild ไปยังองค์ประกอบในแม่แบบจะพร้อมใช้งานอย่างแน่นอนใน ngAfterViewInit ไม่ใช่ก่อนหน้านั้น

@ViewChild("input") input!: ElementRef;

ngAfterViewInit() {
  this.input.nativeElement.focus();
}

AfterViewChecked

ฮุก AfterViewChecked จะทำงานหลังจากตรวจสอบมุมมองของคอมโพเนนต์ทุกครั้ง ฮุกนี้ทำงานบ่อย จึงควรให้ทำงานเท่าที่จำเป็น

ngAfterViewChecked() {
  // runs after each view check
}

AfterContentInit

ฮุก AfterContentInit จะทำงานหนึ่งครั้งหลังจากเริ่มต้นเนื้อหาที่แทรกผ่าน ng-content แล้ว

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

export class CardComponent implements AfterContentInit {
  ngAfterContentInit() {
    console.log("projected content ready");
  }
}

การเข้าถึง ContentChild

ใช้ @ContentChild เพื่อค้นหาเนื้อหาที่แทรกเข้ามา การอ้างอิงจะพร้อมใช้งานใน ngAfterContentInit

@ContentChild(HeaderComponent) header!: HeaderComponent;

ngAfterContentInit() {
  console.log(this.header);
}

AfterContentChecked

ฮุก AfterContentChecked จะทำงานหลังจากตรวจสอบเนื้อหาที่แทรกเข้ามาทุกครั้ง เช่นเดียวกับฮุกตรวจสอบมุมมอง ฮุกนี้จะทำงานบ่อย

ลำดับฮุกทั้งหมด

สำหรับคอมโพเนนต์ที่มีอินพุตและเนื้อหา ลำดับการทำงานคือ ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked

// init sequence:
// OnChanges -> OnInit -> DoCheck
// -> AfterContentInit -> AfterContentChecked
// -> AfterViewInit -> AfterViewChecked

ข้อผิดพลาด ExpressionChangedAfterChecked

การเปลี่ยนข้อมูลที่ผูกไว้ภายใน ngAfterViewInit อาจทำให้เกิด ExpressionChangedAfterItHasBeenCheckedError ซึ่งเป็นข้อผิดพลาดที่รู้จักกันดี โปรดเลื่อนการอัปเดตดังกล่าวออกไปเพื่อหลีกเลี่ยงข้อผิดพลาดนี้

ngAfterViewInit() {
  // defer to next tick to avoid the error
  setTimeout(() => this.ready = true);
}

การใช้ ViewChildren

@ViewChildren จะส่งคืน QueryList ที่ประกอบด้วยองค์ประกอบหรือคอมโพเนนต์ที่ตรงกันหลายรายการ และพร้อมใช้งานใน ngAfterViewInit

@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;

ngAfterViewInit() {
  console.log(this.items.length);
}

การเลือกฮุกที่เหมาะสม

ใช้ฮุก AfterView กับแม่แบบของคอมโพเนนต์เอง และใช้ฮุก AfterContent กับเนื้อหาที่แทรกเข้ามา ควรเลือกตัวแปร Init สำหรับการตั้งค่าครั้งเดียว และใช้ตัวแปร Checked เฉพาะเมื่อจำเป็น

ตรวจสอบความเข้าใจอย่างรวดเร็ว

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

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

ทบทวน

ฮุก AfterContent จะทำงานกับเนื้อหาที่แทรกเข้ามา ส่วนฮุก AfterView จะทำงานกับมุมมองของคอมโพเนนต์เอง ตัวแปร Init จะทำงานหนึ่งครั้ง ส่วนตัวแปร Checked จะทำงานในทุกรอบ ใช้ฮุกเหล่านี้เพื่อเข้าถึง @ViewChild และ @ContentChild ได้อย่างปลอดภัย

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

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

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

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

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

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

บทเรียน “ฮุก AfterView และ AfterContent” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ฮุก AfterView และ AfterContent”

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

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

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

บทเรียน “ฮุก AfterView และ AfterContent” ใช้เวลานานแค่ไหน

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

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

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

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

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