Угловой canDeactivate не работает и значение показывает нуль

Question

Я перехожу по ссылке: https://www.concretepage.com/angular-2/angular-candeactivate-guard-example, и у меня ничего не работает в моем реальном приложении. У меня есть код ниже.

AppModule

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

DialogService

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);
  }
}

AppRoutingModule

const routes: Routes = [
  {
    path: '',
    component: SidebarPageLayoutComponent,
    children: [
      ..........
      ..........
      {
        path: 'employee/:programId',
        canActivate: [DirectAccessGuard],
        canDeactivate: [PendingChangesGuard],
        pathMatch: 'full',
        loadChildren: './employee/employee.module#EmployeeModule'
      },
      ......
      .........
    ]
  }
];

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

PendingChangesGuard

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

ПРИМЕЧАНИЕ. Я использую формы на основе шаблонов и PendingChangesGuard метод класса canDeactivate(component: CanComponentDeactivate...) где component переменная всегда становится нулевой

Answer 1

Если вы хотите реализовать защиту модуля lazyload, используйте canLoad вместо canActivate.

Затем попробуйте переместить CanDeactive в конфигурацию маршрутов EmployeeModule.

employeeModule.routes.ts

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

Answer 2

1. В лучших практиках, чтобы средство защиты можно было использовать в любом компоненте, класс защиты PendingChangesGuard должен реализовывать интерфейс, а не компонент. Здесь интерфейс ComponentCanDeactivate:
   
   PendingChangesGuard
   export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate>
   
   

2. Компонент Module SidebarPageLayoutComponent.module.ts должен объявлять Guard в двух местах:
   
   SidebarPageLayoutComponent.module.ts
   
   const routes: Routes = [ { path: '...', component: SidebarPageLayoutComponent, canDeactivate: [PendingChangesGuard] } ]; @NgModule({ imports: [ ..., RouterModule.forChild(routes) ], declarations: [SidebarPageLayoutComponent], providers: [PendingChangesGuard] }) export class SidebarPageLayoutComponentModule { }