Angular / المتوسط / الدرس 8
التنقل وبيانات المسار
عامل URL كحالة تطبيق واضبط المسارات والمخارج وافحص بياناتها دون اعتبار حارس العميل إذن خادم.
في هذه الصفحة
أهداف الدرس
- شرح مطابقة المسار والمخرج والرابط والمعاملات.
- فحص هويات المسار قبل استعمال المجال.
- معالجة تغير التنقل والرفض صراحة.
ينبغي أن يملك التنقل عنوانًا قابلًا للإعادة
يربط الموجّه حالة URL بعروض المخارج، ويشترك الإعداد والتوفير وRouterOutlet والروابط. لا تكفي صفحة تعمل بالنقر السابق فقط إذا وجب تحميل عنوانها مباشرة. ميّز معامل المسار والاستعلام والجزء واختر الحالة بدل إخفاء التنقل بالخدمة. يجب أن يعيد الرجوع عرضًا مفهومًا، ويقدم المضيف استجابة صحيحة للطلب المباشر منفصلة عن مطابقة العميل.
معامل المسار نص من حد إدخال
يفحص النموذج هوية موجبة معيارية ويرفض المشوه قبل التحويل. لا يجعل :id النص عددًا، وقد يقبل التحويل وحده مسافات أو صيغًا غير مسموحة. يوضح النموذج الصياغة والمدى ويختبر التحليل لا التنقل. يظل على الخادم فحص السجل وتفويضه؛ فالعدد الصحيح ليس إذن وصول.
export {};
function courseId(text: string | null): number | undefined {
if (text === null || !/^[1-9][0-9]*$/.test(text)) { return undefined; }
const id = Number(text);
return Number.isSafeInteger(id) && id <= 100000 ? id : undefined;
}
console.log(courseId("7"), courseId("7x"), courseId(null));
7 undefined undefined
السطر 7 undefined undefined دون موجّه أو تنقل أو وصول لسجل.
ترتيب التصريحات وتوفير المخرج
يفترض الإعداد CoursePage وNotFoundPage مستقلتين. يعيد الفارغ التوجيه بالمطابقة الكاملة ويختار ذو المعامل صفحة المقرر ويأتي العام أخيرًا. وفرها بـprovideRouter واستورد RouterOutlet في الهيكل وRouterLink عند مالك الرابط. لا ينشئ المقطع الصفحات أو المضيف؛ اختبر المطابقة والروابط المباشرة والبديل بتجربة موجّه.
import { Routes } from "@angular/router";
import { CoursePage } from "./course-page";
import { NotFoundPage } from "./not-found-page";
export const routes: Routes = [
{ path: "", redirectTo: "courses/1", pathMatch: "full" },
{ path: "courses/:id", component: CoursePage },
{ path: "**", component: NotFoundPage }
];
مع الصفحات والإقلاع تطابق /courses/7 الصفحة ويصل المجهول للبديل؛ ولا ينفذ المقطع التنقل.
عدم افتراض إعادة المكوّن لكل معامل
قد يعاد استخدام المكوّن مع تغير المعامل. تناسب snapshot لحظة واحدة فقط إن قصد العقد، وإلا راقب التيار أو ربط المدخل المدعوم واربط العمر. يحتاج التحميل الجديد حالات واضحة ومنع استجابة قديمة من الكتابة فوق التنقل الأحدث. اختبر عودة الحارس والمحلل وإلغاءهما. يحسن الحارس التجربة ولا يؤمن API من الطلب المباشر؛ فالإذن بالخادم.
الأخطاء الشائعة وإصلاحها
إعادة الفارغ تلتقط كل التنقلات.
- لماذا يحدث؟
- يغيب شرط المطابقة الكاملة.
- كيف تصلحه؟
- اضبط pathMatch: "full" للفارغ المعلن.
- كيف تتجنب تكراره؟
- اختبر الجذر وغير الفارغ.
تعرض الصفحة هوية المسار السابقة.
- لماذا يحدث؟
- عوملت snapshot كمصدر مستمر.
- كيف تصلحه؟
- راقب الحالة الحالية بتحديث مربوط بالعمر.
- كيف تتجنب تكراره؟
- اختبر المعامل دون فرض إعادة المكوّن.
استخدام الحارس كفحص إذن وحيد.
- لماذا يحدث؟
- خُلط تحكم التنقل بإذن الخادم.
- كيف تصلحه؟
- فوّض العملية المحمية بالخادم.
- كيف تتجنب تكراره؟
- اختبر رفض API المباشر منفصلًا.
اختبر فهمك
1. صنّف "0" و"007" و"12" و"12x" واشرح أنها سياسة مجال.
اعرض الحل المشروح
تُقبل "12" وحدها لاشتراط الموجب دون أصفار أولية ومدى آمن. يستطيع Angular توجيه نص آخر؛ ويختار التطبيق قبوله. إذا سمحت الأصفار فغيّر التطبيع واختبره صراحة لا بتحويل نوعي.
2. ينتقل المستخدم من 7 إلى 8 مع إعادة المكوّن. ما الحالات والاختبارات وراء العنوان؟
اعرض الحل المشروح
حدّث الهوية وافتح التحميل وامنع نتيجة السبعة المتأخرة من استبدال الثمانية وعالج الخطأ والمفقود. افحص التنظيف وهوية السجل بعد الردين وإذن الثمانية ولو سُمحت السبعة. لا يثبت العنوان وحده توافق البيانات والعنوان.
أهم ما تعلمته
- العنوان حالة لها حد فحص.
- طابق عمدًا وراقب تغير المعامل.
- توجه الحراس التنقل وتفرض الخوادم الإذن.