canDeActivate函数未调用

Question

我正在使用角度5.2.9

当用户从当前页面转到另一页面而不保存表单值时，我试图显示确认模式。我已经创建了canDeActivate服务类，并在我的路由模块中使用了它，但是奇怪的是没有调用函数。请帮助我。

结构：

所有服务和防护都随初始Angular应用程序一起加载。

已加载有角度的APP加载canDeactive gaurd类

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

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

@Injectable()
export class CanDeactivateGuard implements CanDeactivate {

  canDeactivate(component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable | Promise | boolean {
    console.log('Deactivate');
    return component.canDeactivate ? component.canDeactivate() : true;
  }

}

延迟加载的模块组件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'app-case-details',
  templateUrl: './case-details.component.html',
  styleUrls: ['./case-details.component.scss']
})
export class CaseDetailsComponent implements OnInit, OnDestroy, CanComponentDeactivate {

ngOnInit() {}
canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    if ((this.caseDetailForm.touched && this.caseDetailForm.dirty)
      || (this.memberAssignMentForm.touched && this.memberAssignMentForm.dirty)) {
      return confirm('Do you wish to proceed with unsaved changes?');
    }
    return true;
  }

  ngOnDestroy() {  }
}

惰性加载模块路由模块文件。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ModuleAuthGaurd, CanDeactivateGuard, UserNodesResolverService } from '@app/core';
import { LazyMainComponent} from '@app/pages/prenatal/prenatal.component';
import {
  OutreachComponent,
  SearchComponent,
  CaseComponent,
  MemberInformationComponent,
  CaseManagementnComponent,
  CaseDetailsComponent
} from '@app/pages/mypages';


const routes: Routes = [
  {
    path: '',
    component: LazyMainComponent,
    data: {moduleName: appCodeNames.prenatalCodeName},
    resolve: {userNodes: UserNodesResolverService},
    canActivate: [ModuleAuthGaurd],
    canActivateChild: [ModuleAuthGaurd],
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'outreach',
        component: OutreachComponent
        children: [
          {
            path: '',
            redirectTo: 'search',
            pathMatch: 'full'
          },
          {
            path: 'search',
            component: SearchComponent,
          }
          {
            path: ':id/cases',
            component: CaseComponent,
            data: {moduleName: appCodeNames.prenatalCodeName},
            children: [
              {
                path: '',
                redirectTo: 'memberInformation',
                pathMatch: 'full'
              },
              {
                path: 'memberInformation',
                component: MemberInformationComponent
              },
              {
                path: 'caseManagement',
                component: CaseManagementnComponent
                children: [
                  {
                    path: '',
                    redirectTo: 'caseDetails',
                    pathMatch: 'full'
                  },
                  {
                    path: 'caseDetails',
                    component: CaseDetailsComponent
                    canDeActivate: [CanDeactivateGuard]
                  }
                ]
              },
            ]
          }
        ]
      }
    ]
  },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PrenatalRoutingModule { }




import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';


import {
  AuthGaurd,
  ModuleAuthGaurd,
CanDeactivateGuard 
} from '@app/core';

const QMP_GUARDS = [
  AuthGaurd,
  ModuleAuthGaurd,
CanDeactivateGuard 
];
@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    ...QMP_GUARDS,
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }

  static forRoot(): ModuleWithProviders {
    return <ModuleWithProviders>{
      ngModule: CoreModule,
      providers: [...QMP_GUARDS]
    };
  }
}