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

如果您要实现对惰性加载模块的保护，请使用canLoad而不是canActivate。

然后尝试在EmployeeModule路由配置内移动CanDeactive。

employeeModule.routes.ts

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

Answer 2

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

PendingChangesGuard
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate>
组件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 { }

角度canDeactivate不起作用并且值显示为空

2 个答案: