معرفی
در یک برنامه وب، اگر فرمی را پر کنید و ناآگاهانه روی پیمایش دیگر کلیک کنید، ممکن است اطلاعات پر شده در فرم را از دست بدهید. ممکن است برای کاربر دشوار باشد که یک بار دیگر فرم را پر کند. ما می توانیم تغییرات را نظارت کنیم و می توانیم به کاربر هشدار بدهیم. در این مقاله به شما نشان خواهم داد که چگونه هشدار تغییرات ذخیره نشده را برای کاربر در Angular 7 پیاده سازی کنید.
مرحله 1 - یک کلاس Injectable ایجاد کنید که رابط CanDeactivate را پیاده سازی کند
یک کلاس صادرات تزریقی (SampleChangesGuard) ایجاد کنید که رابط CanDeactivate و یک رابط صادراتی (SampleComponentCanDeactivate) را اجرا می کند.
- import { CanDeactivate } from "@angular/router";
- import { Injectable } from "@angular/core";
- import { Observable } from "rxjs/Observable";
- export interface SampleComponentCanDeactivate {
- SamplecanDeactivate: () => boolean | Observable<boolean>;
- }
- @Injectable()
- export class SampleChangesGuard implements CanDeactivate<SampleComponentCanDeactivate> {
- constructor() {
- }
- canDeactivate(
- component: SampleComponentCanDeactivate
- ): boolean | Observable<boolean> {
- return component.SamplecanDeactivate()
- ? true
- : confirm(
- "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes."
- );
- }
- }
مرحله 2 - مسیرها را پیکربندی کنید
ما باید مسیریابی را پیکربندی کنیم. SampleChangesGuard را در فایل app-routing.module.ts وارد کنید.
- import { SampleChangesGuard } from './guards/sellout-changes-guard';
در داخل آرایه Routes، یک پارامتر اختیاری، canDeactivate، وجود دارد. باید SampleChangeGaurd را مانند زیر به آرایه canDeactivate اضافه کنیم.
- {
- path: 'test',
- component: TestComponent,
- canActivate:[SampleChangesGuard]
- }
مرحله 3 - فرم جزء را پیکربندی کنید.
ابتدا باید SampleComponentCanDeactivate را مانند زیر در کامپوننتی که یک فرم داریم وارد کنیم.
- import { SampleComponentCanDeactivate } from './../../guards/sellout-changes-guard';
باید فرم را بررسی کرده و SampleComponentCanDeactivate را مانند زیر پیاده سازی کنیم. باید نمونه کد زیر را در قسمت اعلامیه اضافه کنیم.