0

我正在关注来自：https ://www.concretepage.com/angular-2/angular-candeactivate-guard-example 的链接，在我的现实世界应用程序中没有什么对我有用。我有以下代码。

应用模块

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

应用路由模块

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变量总是为空

4

2 回答 2

1

如果要对延迟加载模块实施保护，请使用canLoad而不是 canActivate。

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

员工模块.routes.ts

const routes: Routes = [ {
        path: '',
        componenent: EmployeeComponent,
        canDeactivate: [PendingChangesGuard],
 }]
于 2019-10-04T17:02:41.143 回答
0

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

于 2020-04-20T10:26:19.437 回答