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

เหตุการณ์เราเตอร์และการนำทาง

ตอบสนองต่อเหตุการณ์ต่าง ๆ ในวงจรชีวิตการนำทาง

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

สตรีมเหตุการณ์ของเราเตอร์

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

ประเภทเหตุการณ์สำคัญ

เหตุการณ์ที่พบบ่อย ได้แก่ NavigationStart, NavigationEnd, NavigationCancel และ NavigationError แต่ละรายการเป็นอินสแตนซ์ของคลาสที่คุณกรองได้

การรับฟัง NavigationEnd

กรองสตรีมให้เหลือเหตุการณ์ประเภทที่ต้องการด้วย filter และการตรวจสอบ instanceof

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

const router = inject(Router);
router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));

ตัวบ่งชี้การโหลดส่วนกลาง

แสดงตัวหมุนระหว่าง NavigationStart กับ NavigationEnd/Cancel/Error

router.events.subscribe(e => {
  if (e instanceof NavigationStart) this.loading = true;
  if (e instanceof NavigationEnd ||
      e instanceof NavigationCancel ||
      e instanceof NavigationError) this.loading = false;
});

เลื่อนไปด้านบนเมื่อเปลี่ยนเส้นทาง

รีเซ็ตตำแหน่งการเลื่อนหลังการเปลี่ยนเส้นทางที่สำเร็จแต่ละครั้ง (มี scrollPositionRestoration ในตัวเช่นกัน)

router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));

การติดตามหน้าเว็บสำหรับการวิเคราะห์

NavigationEnd เป็นจุดเชื่อมต่อที่เหมาะที่สุดสำหรับบันทึกการเข้าชมหน้าเว็บไปยังระบบวิเคราะห์

router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));

การเปลี่ยนเส้นทางด้วยโปรแกรม

router.navigate รับอาร์เรย์คำสั่ง ส่วน router.navigateByUrl รับสตริง URL แบบเต็ม ทั้งสองอย่างคืนค่าเป็นพรอมิสที่ให้ผลว่าเปลี่ยนเส้นทางสำเร็จหรือไม่

router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');

const ok = await router.navigate(['/home']);
console.log('success?', ok);

การเปลี่ยนเส้นทางแบบสัมพันธ์

ใช้ relativeTo เพื่อเปลี่ยนเส้นทางโดยอ้างอิงจากเส้นทางปัจจุบัน เช่น จากคอมโพเนนต์ลูก

const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });

routerLink และสถานะ active

ในเทมเพลต routerLink จัดการการเปลี่ยนเส้นทางแบบประกาศ ส่วน routerLinkActive จะเพิ่มคลาส CSS ให้กับลิงก์ที่ active

<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
   routerLinkActive="active">Profile</a>

การจัดการ NavigationError

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

router.events.pipe(
  filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));

การกรองเหตุการณ์แบบมีชนิด

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

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

ทดสอบความเข้าใจเกี่ยวกับเหตุการณ์ของเราเตอร์ของคุณ

สรุป: เหตุการณ์ของเราเตอร์และการเปลี่ยนเส้นทาง

Router.events เปิดให้เข้าถึงวงจรการเปลี่ยนเส้นทาง

  • กรองหา NavigationStart/End/Cancel/Error
  • ใช้ควบคุมตัวหมุนโหลด การรีเซ็ตการเลื่อน และระบบวิเคราะห์
  • เปลี่ยนเส้นทางด้วย navigate/navigateByUrl หรือ routerLink

คุณเรียน Angular Router Advanced จบแล้ว

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

บทเรียน “เหตุการณ์เราเตอร์และการนำทาง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เหตุการณ์เราเตอร์และการนำทาง”

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

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

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

บทเรียน “เหตุการณ์เราเตอร์และการนำทาง” ใช้เวลานานแค่ไหน

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

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

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

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

  1. พารามิเตอร์เส้นทางและพารามิเตอร์คำค้น
  2. ตัวแก้ไขและข้อมูลเส้นทาง
  3. ตัวป้องกันเส้นทางแบบฟังก์ชัน
  4. เหตุการณ์เราเตอร์และการนำทาง
← กลับไปที่ Angular Academy