نقل الكائنات بين مكونات Angular2 باستخدام خصائص التوجيه وحالة الراوتر

عندما يتعلق الأمر بنقل الكائنات (Objects) عبر عمليات التوجيه (Routing) في إطار Angular2، يمكن أن تكون هناك استراتيجيات مختلفة لتحقيق هذا الهدف. تعتمد الحلول على متطلبات التطبيق وهيكله، ولكن يمكن استخدام بعض الأساليب الشائعة لتحقيق هذه الوظيفة بشكل فعال.

في البداية، يمكنك استخدام خاصية queryParams في Angular2 لتمرير البيانات من مكون إلى آخر عبر عمليات التوجيه. يمكنك تكوين الرابط ليحمل معلومات الكائن الخاص بالمستخدم، مثل الـ userId، كمعلمات في الرابط.

على سبيل المثال:

typescriptCopy code
// في userTableComponent
this.router.navigate(['/user-details'], { queryParams: { userId: user.id } });

ثم يمكنك استرجاع هذه المعلمات في userDetailComponent عبر ActivatedRoute:

typescriptCopy code
// في userDetailsComponent
this.activatedRoute.queryParams.subscribe(params => {
  const userId = params['userId'];
  // الآن يمكنك استخدام userId لاسترجاع معلومات المستخدم من userTableComponent
});

ومع ذلك، إذا كنت ترغب في تجنب استخدام عمليات HTTP الزائدة لاسترجاع معلومات المستخدم بالكامل في userDetailComponent، يمكنك أيضاً استخدام خدمة مشتركة لتخزين معلومات المستخدم بشكل مؤقت والوصول إليها في userDetailComponent.

قد يكون لديك خدمة تسمى userService تحتفظ بالمعلومات حين يتم النقر على صف في userTableComponent، ويمكن لـ userDetailComponent الوصول إلى هذه الخدمة للحصول على معلومات المستخدم دون الحاجة إلى طلب HTTP إضافي.

typescriptCopy code
// في userService
private selectedUser: User;

setSelectedUser(user: User) {
  this.selectedUser = user;
}

getSelectedUser(): User {
  return this.selectedUser;
}

ثم يمكنك استخدام هذه الخدمة في userTableComponent و userDetailComponent لتعيين والوصول إلى معلومات المستخدم المحدد.

تذكر أن تقوم بإدراج الخدمة في مصفوفة مزودي الخدمة في وحدة Angular الخاصة بتطبيقك.

إضافةً إلى الاستراتيجيات المذكورة أعلاه، يمكن أيضاً استخدام خاصية RouterState في Angular لتحقيق نقل الكائنات بين المكونات. يمكنك استخدام حالة التوجيه لتخزين الكائن المحدد والوصول إليه في المكون الجديد.

في userTableComponent، يمكنك تحديد الكائن وتخزينه في حالة التوجيه:

typescriptCopy code
// في userTableComponent
import { Router } from '@angular/router';

// ...

constructor(private router: Router) {}

onRowClick(user: User) {
  this.router.navigate(['/user-details'], { state: { user } });
}

ثم في userDetailComponent، يمكنك الوصول إلى الكائن المحدد من حالة التوجيه:

typescriptCopy code
// في userDetailsComponent
import { Router } from '@angular/router';

// ...

ngOnInit() {
  const currentState = this.router.getCurrentNavigation().extras.state;
  if (currentState && currentState.user) {
    const selectedUser = currentState.user as User;
    // الآن يمكنك استخدام selectedUser كمعلومات المستخدم المحدد
  }
}

يتيح لك هذا النهج تجنب الحاجة إلى الاعتماد على المعلومات في عنوان URL والاستفادة من حالة التوجيه لتبادل البيانات بين المكونات.

عند تبني أي نهج، يفضل دائمًا مراعاة أمان التطبيق والتحقق من صحة البيانات المستلمة لتجنب الأخطاء والهجمات المحتملة.