TypeScript - איך להציג למשתמש הודעה כשעזוב את עמוד Angular 4 אם נעשו שינויים?

יש לי שני לשוניות (PrimeNg Tabview) בעמוד Angular4 שלי עם שדות קלט רבים כמו תיבות טקסט, תיבות טקסט ארוך, תפריטים נפתחים וכו'. יש לי גם תפריט צדדי לניווט לעמודים אחרים בתוך האפליקציה. אני רוצה שאם יש שינוי כלשהו בנתונים בשדות הקלט האלה, תופיע הודעה קופצת (מודאלית או תיבת אישור) אם המשתמש מנסה לשנות את הלשונית, או לנווט לעמודים אחרים בעזרת התפריט הצדדי.

ניסיתי את השיטה ngOnDestroy(). אף על פי ששיטה זו מופעלת רק כאשר הדף נסגר (על ידי ניווט לדף אחר או מעבר ללשונית הבאה), היא לא מאפשרת להציג חלון קופץ/תיבת אישור מתוך השיטה מכיוון שהיא נמצאת ב-hook של מחזור החיים destroy.

אנא עזור לי לזהות את האירוע האמיתי באמצעותו אוכל להציג למשתמש תיבת אישור אם יש שינויים באחד משדות הקלט בדף/טופס.

@surjit הצעה:

my-guard.service.ts:

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

@Injectable()
export class CreateRequestGuardService implements CanDeactivate<CanComponentDeactivate> {
    canDeactivate(component: CanComponentDeactivate) {
        let vDeactivate = component.CanDeactivate ? component.CanDeactivate() : true;
        return vDeactivate;
    }   
}

בתוך my-component.ts:

import { CreateRequestGuardService } from './my-guard.service';

canDeactivate(): Observable<boolean> | boolean {
    console.log('I am moving away!');
    if (!this.isSaved) {
        const confirmation = window.confirm('Are you sure?');
        return Observable.of(confirmation);
    }
    else{
        return true;
    }
}

ב-my-router.ts:

import { CreateRequestGuardService } from './my-guard.service';

const allRoutes: Routes = [
   { path: 'save', component: my-component, canDeactivate: [MyGuardService]},
   { path ....},
   ..
]

תשובה #1

השתמש ב-CanDeactivate guard בנתיב הרכיב שברצונך להגן עליו

קרא את CanDeactivate למידע נוסף

עדכון: זה הקוד בפסודו-קוד שלי. הוא לא נבדק

my-guard.service.ts:

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

@Injectable()
export class CreateRequestGuardService implements CanDeactivate<CanComponentDeactivate> {
    canDeactivate(component: CanComponentDeactivate, 
                  currentRoute: ActivatedRouteSnapshot, 
                  currentState: RouterStateSnapshot, 
                  nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return component.canDeactivate(); //the function will be called on the component, that's why we'll implement the function on the component.
    }   
}

הנתב-שלהי.ts:

import { CreateRequestGuardService } from './my-guard.service'; //the class name in my-guard.service.ts

const allRoutes: Routes = [
   { path: 'save', component: myComponent, canDeactivate: [CreateRequestGuardService]},
   { path ....},
   ..
]

הרכיב-שלהי.ts

import { CreateRequestGuardService } from './my-guard.service';

export class myComponent implements CanComponentDeactivate { //implements the interface created on the guard service

    /*
        your component data
    */
    //implementation of canDeactivate
    canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
        if(form_is_edited && not_saved){
            return confirm("Discard Changes?");
        }
        else
            return true;
    }
}

הערה : גם אל תשכח להוסיף את שירות השמירה (class) למערך providers בקובץ app.module.ts.