استخدام ActivatedRoute في Angular 2

عند استخدام Angular 2 والعمل مع الروابط والتنقل بين الصفحات، من المهم فهم كيفية الحصول على عنوان URL الحالي باستخدام ActivatedRoute. في الموقف الذي وصفته، تستخدم الكود التالي للانتقال إلى صفحة جديدة:

typescriptCopy code
this.router.navigate(['./somepath'], { relativeTo: this.route });

وعند القيام بذلك، فإنك تنقل نفسك نسبيًا إلى مسار جديد مستندًا إلى المسار الحالي، وبالتالي يتم تغيير الـ URL الذي يتم عرضه في المتصفح. والآن، دعوني أوضح لك كيف يمكنك الحصول على هذا الـ URL الجديد باستخدام ActivatedRoute.

في المقام الأول، يجب عليك استيراد ActivatedRoute من @angular/router في ملف الكود الخاص بك. ثم يمكنك الوصول إلى الـ URL باستخدام مختلف الخصائص المتوفرة في ActivatedRoute.

أولاً، يمكنك استخدام الخاصية snapshot للحصول على لقطة حالية من الـ ActivatedRoute. ولكن ينبغي أن تلاحظ أن هذه الطريقة تحصل فقط على الـ URL عند تحميل الصفحة للمرة الأولى ولا تتبع التغييرات في الـ URL بعد ذلك. هناك خاصية أخرى تستخدم لهذا الغرض وهي paramMap.

typescriptCopy code
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // Using snapshot
    const url = this.route.snapshot.url.join('');
    console.log(url); // Output: somepath

    // Using paramMap (to track changes in URL)
    this.route.paramMap.subscribe(params => {
      const url = params.get('urlParamName');
      console.log(url); // Output: somepath
    });
  }
}

في الكود أعلاه، يتم استخدام snapshot للحصول على لقطة حالية من ActivatedRoute واستخراج الـ URL منها باستخدام خاصية url ومن ثم استخدام join لدمج الأجزاء المختلفة من الـ URL إذا كانت موجودة. أما بالنسبة للطريقة الثانية، فهي استخدام الـ paramMap للاشتراك في التغييرات التي تحدث في الـ URL.

بالتأكيد، دعوني أواصل شرح الموضوع.

عند استخدام الـ paramMap، يمكنك الاشتراك في التغييرات التي تحدث في الـ URL باستخدام الطريقة subscribe التي توفرها Observable المُستخدم في ActivatedRoute. هذا يعني أنك ستكون على اطلاع دائم بأي تغييرات تحدث في الـ URL، مما يجعل هذه الطريقة مفيدة بشكل خاص إذا كنت تحتاج إلى تحديث الواجهة المستخدم عندما يتغير الـ URL.

علاوة على ذلك، يمكنك أيضًا الاعتماد على البيانات المرسلة عبر الـ URL من خلال الـ paramMap. على سبيل المثال، إذا كان لديك معلومات تحتوي على معرّف المستخدم أو أي بيانات أخرى تُرسل عبر الـ URL، يمكنك الوصول إليها باستخدام الـ paramMap واستخدامها في عرض الصفحة بشكل مناسب.

لتوضيح الفكرة أكثر، دعوني أعطيك مثالًا مبسطًا:

فرضًا أن لدينا تطبيقًا يقوم بعرض تفاصيل لمقالة معينة عن طريق تمرير معرّف المقالة في الـ URL. يمكننا القيام بذلك عن طريق تمرير المعرّف كجزء من الـ URL مثل هذا:

bashCopy code
/articles/123

ثم، باستخدام الـ paramMap، يمكننا الوصول إلى هذا المعرّف واستخدامه لجلب بيانات المقالة المطابقة من قاعدة البيانات، ومن ثم عرضها في الواجهة.

بهذه الطريقة، يمكن لـ ActivatedRoute أن تكون أداة قوية ومرنة للتعامل مع عناوين URL في تطبيقات Angular 2 وتحديد المسارات واستخراج البيانات المرسلة عبر الـ URL.

ومن الجدير بالذكر أنه يمكنك أيضًا استخدام خدمة Router في Angular للتحكم في التنقل بين الصفحات وتغيير الـ URL دون الحاجة إلى استخدام ActivatedRoute بشكل مباشر في بعض الحالات.

باختصار، العمل مع الروابط والـ URL في Angular 2 يمكن أن يكون معقدًا في البداية، ولكن باستخدام ActivatedRoute بشكل صحيح، يمكنك بناء تطبيقات قوية ومرنة تستجيب بشكل فعال لتغييرات الـ URL وتوفير تجربة مستخدم سلسة.