Angular 8 中的页面导航不会触发 canDeactivate()答案

【问题标题】：canDeactivate() is not triggered on page navigation in Angular 8Angular 8 中的页面导航不会触发 canDeactivate()
【发布时间】：2020-05-15 06:52:00
【问题描述】：

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

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

经过大量谷歌搜索后，我发现使用实现 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（）有关）

【问题讨论】：

标签： angular angular-routing angular-router-guards candeactivate

【解决方案1】：

你缺少在你的组件中实现component.canDeactivate，这是唯一知道用户是否可以省略的人。

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

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

【讨论】：

对不起，我没有包含我在组件中编写的代码。正如我认为只有在事件触发后才会调用它。即使我的组件中有 canDeactivate 方法，该事件也不会触发。我在上面的问题中添加了该方法。
也许问题在于您试图停用一组延迟加载的路由。尝试将 CanDeactivateGuard 应用于您正在加载的功能模块的内部路由。