روابط نسبية في Angular

في Angular، يمكنك استخدام روابط نسبية (Relative links) بدلاً من استخدام الروابط الكاملة عند استخدام routerLink. هذا يمكنك من تحديد جزء من المسار بدلاً من تحديد المسار بالكامل.

في مثالك، إذا كنت ترغب في استخدام رابط نسبي بدون جزء القسم (department)، يمكنك تحقيق ذلك عن طريق تحديد المسار النسبي بدلاً من المسار الكامل.

لكن قبل ذلك، يجب عليك ضبط تهيئة المسار في ملف تهيئة المسارات (Routes configuration file) لتتيح لك هذه الوظيفة. على سبيل المثال، يمكنك تحديد مسار نسبي لـ employee/:emp/contacts كما يلي:

typescriptCopy code
{
  path: 'employee/:emp/contacts',
  component: EmployeeContactsComponent,
}

بعد ذلك، يمكنك استخدام رابط نسبي في القالب الخاص بك كما هو موضح في المثال التالي:

htmlCopy code
<ul>
    <li>
        <a [routerLink]="['employee', 1, 'contacts']">a>
    li>
    <li>
        <a [routerLink]="['employee', 2, 'contacts']">a>
    li>
    ...
ul>

باستخدام هذا النهج، يمكنك تجاهل جزء القسم (department) في الروابط التي لا تحتاج إليها، مما يجعل روابطك أكثر سهولة في الصيانة والفهم والتطوير.

بالطبع! عند استخدام الروابط النسبية في Angular، يمكنك استخدامها في أي مكان في تطبيقك حيث تريد تحديد جزء من المسار بدلاً من تحديد المسار بالكامل. هذا يسهل عليك تغيير هيكل المسارات دون الحاجة إلى تعديل كل رابط بشكل فردي.

عندما تستخدم الروابط النسبية، يجب أن تأخذ في الاعتبار أن الرابط النسبي يكون مستندًا إلى المسار الحالي. وهذا يعني أنه إذا كنت في مكان معين في التطبيق حيث المسار الحالي هو /department/1/employee/1/details، على سبيل المثال، فإن استخدام رابط نسبي ['employee', 1, 'contacts'] سيؤدي إلى توليد المسار النهائي /department/1/employee/1/contacts.

إذا كنت ترغب في الانتقال بشكل مباشر إلى رابط نسبي دون النظر إلى المسار الحالي، يمكنك استخدام روابط تبدأ بـ /، مما يجعلها تكون مستقلة عن المسار الحالي. على سبيل المثال، [routerLink]="['/employee', 1, 'contacts']" سينتج عنه المسار النهائي /employee/1/contacts بغض النظر عن المسار الحالي.

باستخدام الروابط النسبية، يمكنك تبسيط روابط التنقل في تطبيقك وتجنب تكرار تحديد أجزاء مكررة من المسار في كل رابط.