Javascript 防护罩不'；不适用于选择新图像

当数据和图像未保存时，我尝试进行保护。因此，当您离开组件时，没有触发“保存”按钮。用户必须得到一个警告

谷歌追踪教程

因此，该保护对数据字段起作用。但是如果我改变了图像，离开了页面，那么什么也没发生

这就是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;
  }
}

以及formCanDeactivate：

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] },
    ]
   },
];

防护装置也可用于更改图像

---

谢谢

有人能帮我吗？会很好的有人能帮我吗？会很好的

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] },
    ]
   },
];