1

当从当前组件导航到不同的组件时，我需要向用户抛出一个弹出窗口。

根据用户的输入，我必须要么让他离开，要么让他留下。

经过大量谷歌搜索后，我发现使用实现 canDeactivate 接口的路由保护是解决此问题的最佳方法。

然而，即使在逐步实现了防护之后，在防护中实现的 canDeactivate() 方法也不会在远离我的组件的任何导航上触发。

这是我作为服务实施的警卫。

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { SearchProjectComponent } from 'src/app/Project/search-project/search-project.component';
@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard  implements CanDeactivate<SearchProjectComponent> {

    canDeactivate(component: SearchProjectComponent,
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot) {debugger
    alert('called from guard');
    const url: string = state.url;
    console.log('Url: ' + url);

  return component.canDeactivate ? component.canDeactivate() : true;
}
}

SearchComponent 是我正在尝试实现 Guard 的组件。（在离开这个组件时，我想抛出一个弹出提示）

这是我的 AppRoutingModule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import { CanDeactivateGuard } from './shared/services/can-deactivate-guard.service';

const routes: Routes = [
    { path: '', loadChildren: () => import('./layout/layout.module').then(m => m.LayoutModule), canActivate: [AuthGuard] },
    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
    { path: 'access-denied', loadChildren: () => import('./access-denied/access-denied.module').then(m => m.AccessDeniedModule) },
    { path: 'add-project', loadChildren: () => import('./Project/add-project/add-project.module').then(m => m.AddProjectModule) },
    // tslint:disable-next-line:max-line-length
    { path: 'search-project', loadChildren: () => import('./Project/search-project/search-project.module').then(m => m.SearchProjectModule), canDeactivate: [CanDeactivateGuard] },
    { path: '**', redirectTo: 'access-denied' },

];

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

从 searchcomponent 导航到任何其他组件时，canDeactivate 方法甚至不会被触发。

这是我的组件中的代码。

  canDeactivate(): Observable<boolean> | boolean {debugger
    alert('called form component');
    if (this.registerForm.dirty) {debugger
      return false;
        //return this.dialogService.confirm('Discard changes for Person?');
    }
    return true;
}
甚至我的组件中的调试器也不会被触发。

有人可以帮我解决我需要纠正的问题吗？（我只是Angular的初学者，但我觉得这个问题是否与routingmodule中的loadchildren（）有关）

4

1 回答 1

0

您缺少实现component.canDeactivate组件内部的功能，这是唯一知道用户是否可以忽略的人。

所以，在你的组件内部，实现这个：

canDeactivate(): boolean {
 return //condition to verify;
}

欲了解更多信息，请看这里：

https://angular.io/guide/router#candeactivate-handling-unsaved-changes

于 2020-01-29T17:52:52.993 回答