ตัวแก้ไขและข้อมูลเส้นทาง
โหลดข้อมูลล่วงหน้าก่อนเปิดใช้งานเส้นทาง
ตัวแก้ไขและข้อมูลเส้นทาง เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
ตัวแก้ไขคืออะไร
ตัวแก้ไขจะดึงข้อมูลล่วงหน้า ก่อน ที่เส้นทางจะทำงาน ทำให้คอมโพเนนต์เรนเดอร์พร้อมข้อมูลที่มีอยู่แล้ว โดยไม่ต้องแสดงสถานะกำลังโหลดในคอมโพเนนต์เอง
ข้อมูลเส้นทางแบบคงที่
พร็อพเพอร์ตี data ใช้แนบค่าคงที่เข้ากับเส้นทาง และอ่านค่าได้ผ่าน ActivatedRoute.data
export const routes = [
{ path: 'admin', component: AdminComponent,
data: { title: 'Admin Panel', roles: ['admin'] } }
];การอ่านข้อมูลเส้นทาง
route.data คือออบเซอร์เวเบิลของออบเจ็กต์ข้อมูลที่ถูกรวมเข้าด้วยกัน
route.data.subscribe(d => {
console.log(d['title']); // Admin Panel
});ตัวแก้ไขแบบฟังก์ชัน: ResolveFn
Angular สมัยใหม่ใช้ ResolveFn ซึ่งเป็นฟังก์ชันธรรมดาที่ส่งคืนข้อมูล (หรือออบเซอร์เวเบิล/พรอมิสของข้อมูลนั้น)
import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
export const userResolver = (route) => {
const http = inject(HttpClient);
return http.get('/api/user/' + route.paramMap.get('id'));
};การเชื่อมตัวแก้ไขเข้ากับเส้นทาง
แนบตัวแก้ไขไว้ใต้คีย์ resolve ผลลัพธ์จะไปอยู่ใน route.data ภายใต้คีย์นั้น
export const routes = [
{ path: 'user/:id', component: UserComponent,
resolve: { user: userResolver } }
];การใช้ข้อมูลที่แก้ไขแล้ว
อ่านค่าที่แก้ไขแล้วจาก route.data โดยใช้คีย์ของค่า
route.data.subscribe(d => {
this.user = d['user']; // already loaded
});ข้อมูลที่แก้ไขแล้วผ่านการผูกอินพุต
เมื่อใช้ withComponentInputBinding() คีย์ของข้อมูลที่แก้ไขแล้วจะผูกกับอินพุตของคอมโพเนนต์ที่ตรงกันโดยอัตโนมัติ
export class UserComponent {
@Input() user!: User; // from resolve: { user: ... }
}ตัวแก้ไขกับจังหวะการนำทาง
เราเตอร์จะรอให้ออบเซอร์เวเบิลของตัวแก้ไข เสร็จสิ้น (หรือให้พรอมิสเสร็จสมบูรณ์) ก่อนเปิดใช้งานเส้นทาง ตัวแก้ไขที่ไม่เคยเสร็จสิ้นจะทำให้การนำทางค้าง
การจัดการข้อผิดพลาดของตัวแก้ไข
หากตัวแก้ไขเกิดข้อผิดพลาด การนำทางจะถูกยกเลิก ให้ดักจับข้อผิดพลาดภายในตัวแก้ไขเพื่อเปลี่ยนเส้นทางหรือส่งคืนทางเลือกสำรอง
export const userResolver = (route) => {
const http = inject(HttpClient);
const router = inject(Router);
return http.get('/api/user/' + route.paramMap.get('id')).pipe(
catchError(() => { router.navigate(['/404']); return EMPTY; })
);
};ควรใช้ตัวแก้ไขเมื่อใด
ใช้ตัวแก้ไขกับข้อมูลที่ต้องมีอยู่ก่อนแสดงหน้าเว็บ สำหรับข้อมูลที่ทยอยโหลดได้ การดึงข้อมูลในคอมโพเนนต์พร้อมสถานะกำลังโหลดมักให้ประสบการณ์ผู้ใช้ที่ดีกว่า อย่าทำให้การนำทางรอข้อมูลเสริมที่โหลดช้า
กลยุทธ์ชื่อเรื่อง
เราเตอร์มีพร็อพเพอร์ตีเส้นทาง title ในตัว และมี TitleStrategy สำหรับกำหนดชื่อเรื่องของเอกสาร ซึ่งมักใช้ร่วมกับข้อมูลที่แก้ไขแล้ว
export const routes = [
{ path: 'about', component: AboutComponent, title: 'About Us' }
];ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเกี่ยวกับตัวแก้ไข
ทบทวน: ตัวแก้ไขและข้อมูลเส้นทาง
ตัวแก้ไขจะโหลดข้อมูลล่วงหน้าก่อนเปิดใช้งานเส้นทาง
data: ค่าคงที่ของเส้นทางResolveFn+resolve: ดึงข้อมูลล่วงหน้าแบบไดนามิกเข้าไปในroute.data- เราเตอร์จะรอให้เสร็จสิ้น ควรจัดการข้อผิดพลาดเพื่อป้องกันการนำทางค้าง
ถัดไป: ตัวป้องกันเส้นทางแบบฟังก์ชัน
คำถามที่พบบ่อย
บทเรียน “ตัวแก้ไขและข้อมูลเส้นทาง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวแก้ไขและข้อมูลเส้นทาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวแก้ไขและข้อมูลเส้นทาง”
โหลดข้อมูลล่วงหน้าก่อนเปิดใช้งานเส้นทาง คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวแก้ไขและข้อมูลเส้นทาง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พารามิเตอร์เส้นทางและพารามิเตอร์คำค้น
- ตัวแก้ไขและข้อมูลเส้นทาง
- ตัวป้องกันเส้นทางแบบฟังก์ชัน
- เหตุการณ์เราเตอร์และการนำทาง