在Angular 8中，页面导航不会触发canDeactivate()
在Angular 8中，页面导航不会触发canDeactivate()
提问于 2020-01-30 01:43:26
当导航到与当前组件不同的组件时，我有一个向用户抛出弹出窗口的要求。
根据用户的输入，我必须要么允许他离开，要么让他留下来。
经过大量的谷歌搜索，我发现使用实现canDeactivate接口的路由守卫是解决这个问题的最好方法。
但是，即使在逐步实现了防护之后，在远离我的组件的任何导航中都不会触发在防护中实现的canDeactivate()方法。
这是我的guard，我已经将其作为服务实现。
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是我的组件，我正在尝试为它实现卫士。(在离开这个组件时，我想抛出一个弹出式提示)
这是我的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 {}
在从搜索组件导航到任何其他组件时，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()有关)
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-30 01:52:53
你没有在你的组件中实现component.canDeactivate，这是唯一知道用户是否可以省略的东西。
因此，在您的组件中，实现了以下内容：
canDeactivate(): boolean {
return //condition to verify;
}有关更多信息，请查看此处：
https://angular.io/guide/router#candeactivate-handling-unsaved-changes
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59972767
复制相关文章
相似问题
腾讯云开发者
