angular - Angular 8 中的页面导航不会触发 canDeactivate()
问题描述
当从当前组件导航到不同的组件时,我需要向用户抛出一个弹出窗口。
根据用户的输入,我必须要么让他离开,要么让他留下。
经过大量谷歌搜索后,我发现使用实现 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()有关)
解决方案
您缺少实现component.canDeactivate
组件内部的功能,这是唯一知道用户是否可以忽略的人。
所以,在你的组件内部,实现这个:
canDeactivate(): boolean {
return //condition to verify;
}
欲了解更多信息,请看这里:
https://angular.io/guide/router#candeactivate-handling-unsaved-changes
推荐阅读
- c - 无法分配动态内存分段错误
- python - 如何在 Python (patsy) 中正确使用新版本的包?已经安装了,但是继续使用旧版本
- jquery - 如果未选中父复选框,则取消选中所有子项
- kubernetes - 已删除的 Pod 日志
- javascript - 如何在使用 ruby on rails 发出“ajax”表单请求后清除文本区域
- ubuntu - 具有 4 个 vCPU、30 GB、Ubuntu18.04 内存的 Google VM 使用 Magento 2 运行速度极慢如何解决?
- amazon-athena - 我可以在不暴露空表的情况下重新创建 Athena 表吗?
- python - 在不同长度的字符串中查找不同的字符
- c# - Unity Editor GUI 文本大小限制
- php - 计算字段的年份差异 - 开始,今天,e 结束