Question

当未保存数据和图像时，我会尽量保持警惕。因此，当您离开组件并且没有触发保存按钮时。用户将必须获得警告

Googled遵循了教程

因此，Guard适用于数据字段。但是，如果我更改图像并离开页面，则什么也没发生。

这就是canActivateGuard：

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean {

    if(!component.canDeactivate()){
        if (confirm("U heeft nog niet opgeslagen data! Als u dit scherm verlaat worden uw gegevens niet opgeslagen.")) {
          console.log('dirty');

          return true;

        } else {
          console.log('not dirty');

          return false;
        }
    }
    return true;
  }
}

componentCanActivate：

export abstract class ComponentCanDeactivate {

  abstract  canDeactivate(): boolean;

    @HostListener('window:beforeunload', ['$event'])
    unloadNotification($event: any) {
        if (!this.canDeactivate()) {
            $event.returnValue = true;
        }
    }
}

和表单CanDeactivate：

export abstract class FormCanDeactivate extends ComponentCanDeactivate {

 abstract get form(): NgForm;

 canDeactivate(): boolean {
      return this.form.submitted || !this.form.dirty;
  }
}

这是普通形式：

export class SettingsAccountComponent extends FormCanDeactivate implements OnInit, OnDestroy  {
  private profileSubscription: Subscription;
  profile: AccountProfile;
  currentProfile: AccountProfile;
  selectedFileName: string;
  deletePicture: boolean;
  saving: boolean;
  formErrors: { header: string; messages: string[] }[];
  innerWidth = window.innerWidth;


  @ViewChild( 'form', {static: false} )
  form: NgForm;

这是用于routing.module的：

const settingsRoutes: Routes = [

  {
    path: '',
    component: SettingsNavigationComponent,
    canActivate: [AuthGuard] ,
    children: [
     {path: '', redirectTo: 'account', pathMatch: 'full' },
     {path: 'account', component: SettingsAccountComponent, canDeactivate: [CanDeactivateGuard] },
     {path: 'apparaten' , component: SelfcareComponent, canActivate: [AuthGuard] },
     {path: 'apps' , component: SettingsAppsComponent, canActivate: [AuthGuard] },
     {path: 'indicatiepermissies' , component: SettingsIndicatorPermissionsComponent, canActivate: [AuthGuard] },
     { path: 'algemeen', component: SettingsGeneralComponent, canActivate: [AuthGuard] },
     {path: 'log' , component: SettingsLogComponent, canActivate: [AuthGuard] },
     {path: 'organisatie' , component: SettingsAddOrganisationComponent, canActivate: [AuthGuard] },
    ]
   },
];

保护罩也可以用来改变图像。

谢谢

Guard无法选择新图片

0 个答案: