Angular 角度canDeactivate不工作且值显示为空

我下面的链接来自：并且在我的实际应用程序中没有任何东西对我有效。我有下面的代码

应用模块

@NgModule({
  declarations: [
    AppComponent,
    TemplateComponent,
    HeaderComponent,
    FooterComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [DirectAccessGuard, PendingChangesGuard, DialogService],
  bootstrap: [AppComponent]
})
export class AppModule { }

对话服务

import { Injectable } from '@angular/core';
import 'rxjs/add/observable/of';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DialogService {

  confirm(message?: string): Observable<boolean> {
    const confirmation = window.confirm(message || 'Are you sure?');

    return Observable.of(confirmation);
  }
}

悬垂变化守卫

import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Injectable, HostListener } from '@angular/core';
import { Observable } from 'rxjs';
import { ProgramComponent } from '../employee/employee.component';
import { DialogService } from '../services/dialog.service';

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable()
export class PendingChangesGuard implements CanDeactivate<EmployeeComponent> {

  constructor(private dialogService: DialogService) { }

  canDeactivate(component: EmployeeComponent, route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    const url: string = state.url;
    console.log('Url: ' + url);

    if (!component.isUpdating && component.form.dirty) {
      component.isUpdating = false;
      return this.dialogService.confirm('Discard changes for Country?');
    }
    return true;
  }
}

从'@angular/router'导入{CanDeactivate，ActivatedRouteSnapshot，RouterStateSnashot}；
从“@angular/core”导入{Injectable，HostListener}；
从“rxjs”导入{Observable}；
从“../employee/employee.component”导入{ProgramComponent}；
从“../services/dialog.service”导入{DialogService}；
导出接口组件CandeActivate{
canDeactivate:（）=>布尔|可观察；
}
@可注射（）
导出类PendingChangesGuard实现CanDeactivate{
构造函数（私有dialogService:dialogService）{}
canDeactivate（组件：EmployeeComponent，路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察的布尔值{
const url:string=state.url；
log（'Url:'+Url）；
如果（！component.isupdate&&component.form.dirty）{
component.isupdate=false；
返回此.dialogService.confirm（'Discard changes for Country？'）；
}
返回true；
}
}

---

注意：我使用的是模板驱动的表单和

PendingChangesGuard

类的方法

canDeactivate（组件：CanComponentDeactivate…

，其中

组件

变量总是为null

，如果您想实现对lazyload模块使用而不是canActivate的保护

然后尝试在EmployeeModule routes配置中移动CanDeactive

员工模块.routes.ts

const routes: Routes = [ {
        path: '',
        componenent: EmployeeComponent,
        canDeactivate: [PendingChangesGuard],
 }]

在最佳实践中，为了使guard可以在任何组件中使用，guard类PendingChangesGuard应该实现接口而不是组件。这里，接口是ComponentCanDeactivate:

挂起更改Guard

导出类PendingChangesGuard实现CanDeactivate

组件模块侧栏PageLayoutComponent.Module.ts应在两个位置声明防护：

SidebarPageLayoutComponent.module.ts

const routes:routes=[
{
路径：“…”，
组件：SidebarPageLayoutComponent，
canDeactivate:[PendingChangesGuard]
}
];
@NGD模块({
进口：[
...,
RouterModule.forChild（路由）
],
声明：[SidebarPageLayoutComponent]，
提供者：[PendingChangesGuard]
})
导出类SidebarPageLayoutComponentModule{
}

---

抱歉，我不清楚您的代码。我想显示alter，以防用户进行了某些更新，但未保存数据，尝试移动到其他页面。您是否可以共享employeemodule路由配置？如果您尝试将EmployeeComponent移动到其他页面，则会触发您的candeactivate。因此，与其向模块级提供canDeactive，不如按照链接向组件级提供canDeactive：懒散加载似乎有一些问题。还有，EmployeeComponent是否移到了另一个页面？你想说什么？在使用惰性加载时，惰性加载总是将组件详细信息显示为空。请在回答中添加一些解释，以便其他人可以从中学习

const routes: Routes = [ {
        path: '',
        componenent: EmployeeComponent,
        canDeactivate: [PendingChangesGuard],
 }]