38. حراس المسار: CanDeactivate (ثبات النموذج)

يمنع CanDeactivate المستخدم من مغادرة مسار ما، ويُستخدم عادةً لتأكيد ما إذا كانوا يريدون تجاهل التغييرات غير المحفوظة في نموذج.

1. تحديد الواجهة القابلة لإلغاء التنشيط

نقوم بتحديد واجهة يجب أن تنفذها المكونات التي تستخدم هذا الحارس.

typescript // can-deactivate.guard.ts import { Observable } from 'rxjs';

export interface CanComponentDeactivate { canDeactivate: () => Observable | Promise | boolean; }

// ينفذ الحارس CanDeactivate باستخدام نوع الواجهة @Injectable({ providedIn: 'root' }) export class ChangesGuard implements CanDeactivate { canDeactivate(component: CanComponentDeactivate) { return component.canDeactivate ? component.canDeactivate() : true; } }

2. تنفيذ الواجهة في المكون

يجب أن يوفر المكون طريقة canDeactivate، والتي تحتوي على المنطق للتحقق من التغييرات غير المحفوظة.

typescript // profile-editor.component.ts export class ProfileEditorComponent implements CanComponentDeactivate { hasUnsavedChanges: boolean = true;

canDeactivate(): boolean { if (this.hasUnsavedChanges) { return confirm('WARNING: You have unsaved changes. Discard?'); } return true; } }

3. تطبيق الحارس

typescript import { ChangesGuard } from './can-deactivate.guard';

const routes: Routes = [ { path: 'profile', component: ProfileEditorComponent, canDeactivate: [ChangesGuard] // يطبق الحارس عند محاولة الخروج } ];

إذا أعاد المكون القيمة false، يتم إجهاض التنقل، ويظل المستخدم في الصفحة الحالية.