ব্রাউজার রিফ্রেশ, উইন্ডো বন্ধ ইত্যাদি ইত্যাদির বিরুদ্ধেও প্রহরীদের coverাকতে (ইস্যুটির বিশদগুলির জন্য @ ক্রিস্টোফেভিডালের মন্তব্য গন্টারের উত্তরে দেখুন), ইভেন্টটি শোনার জন্য @HostListenerআপনার শ্রেণীর canDeactivateপ্রয়োগের সাথে ডেকরেটার যুক্ত করা আমার পক্ষে সহায়ক হয়েছে beforeunload window। সঠিকভাবে কনফিগার করা হলে, এটি একই সময়ে অ্যাপ্লিকেশন এবং বাহ্যিক নেভিগেশন উভয়ের বিরুদ্ধে রক্ষা করবে।
উদাহরণ স্বরূপ:
উপাদান:
import { ComponentCanDeactivate } from './pending-changes.guard';
import { HostListener } from '@angular/core';
import { Observable } from 'rxjs/Observable';
export class MyComponent implements ComponentCanDeactivate {
// @HostListener allows us to also guard against browser refresh, close, etc.
@HostListener('window:beforeunload')
canDeactivate(): Observable<boolean> | boolean {
// insert logic to check if there are pending changes here;
// returning true will navigate without confirmation
// returning false will show a confirm dialog before navigating away
}
}
গার্ড:
import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
export interface ComponentCanDeactivate {
canDeactivate: () => boolean | Observable<boolean>;
}
@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
// if there are no pending changes, just allow deactivation; else confirm first
return component.canDeactivate() ?
true :
// NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
// when navigating away from your angular app, the browser will show a generic warning message
// see http://stackoverflow.com/a/42207299/7307355
confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
}
}
রুট:
import { PendingChangesGuard } from './pending-changes.guard';
import { MyComponent } from './my.component';
import { Routes } from '@angular/router';
export const MY_ROUTES: Routes = [
{ path: '', component: MyComponent, canDeactivate: [PendingChangesGuard] },
];
মডিউল:
import { PendingChangesGuard } from './pending-changes.guard';
import { NgModule } from '@angular/core';
@NgModule({
// ...
providers: [PendingChangesGuard],
// ...
})
export class AppModule {}
দ্রষ্টব্য : @ য্যাস্পার রিসিউ যেমন উল্লেখ করেছেন, আই আই এবং এজ beforeunloadইভেন্টটি অন্য ব্রাউজারগুলির থেকে পৃথকভাবে পরিচালনা করে এবং ইভেন্টটি সক্রিয় falseহওয়ার সময় নিশ্চিত ডায়ালগটিতে শব্দটি অন্তর্ভুক্ত করে beforeunload(যেমন ব্রাউজার রিফ্রেশ, উইন্ডোটি বন্ধ করা ইত্যাদি)। কৌণিক অ্যাপের মধ্যে নেভিগেট করা প্রভাবিত নয় এবং সঠিকভাবে আপনার মনোনীত নিশ্চিতকরণ সতর্কতা বার্তাটি প্রদর্শন করবে। যাঁরা আইই / এজকে সমর্থন করতে চান falseএবং beforeunloadইভেন্টটি সক্রিয় হওয়ার সময় নিশ্চিত ডায়ালগে আরও বিস্তারিত বার্তা প্রদর্শন করতে / দেখতে চান না তারা যখন @ জ্যাসপারআরসিউইউ'র উত্তরটিও কার্যবিধির জন্য দেখতে চাইতে পারেন।