在Angular 7中使用全局守卫CanDeactivate接口的解决方法如下所示:
首先,在你的应用程序中创建一个名为can-deactivate.guard.ts
的新文件,然后在该文件中添加以下代码:
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
export interface CanComponentDeactivate {
canDeactivate: () => Observable | Promise | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate {
canDeactivate(component: CanComponentDeactivate): Observable | Promise | boolean {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
然后,在你的组件中,实现CanComponentDeactivate
接口,并在组件类中添加一个名为canDeactivate
的方法。该方法应返回一个Observable
export class YourComponent implements CanComponentDeactivate {
// ...
canDeactivate(): Observable | Promise | boolean {
// 在这里添加你的逻辑,判断是否允许导航离开当前组件
// 如果允许离开,返回true;如果不允许离开,返回false或一个能解析为false的Observable或Promise
}
}
最后,在你的路由配置文件(通常是app-routing.module.ts
)中,将CanDeactivateGuard
添加为需要应用该全局守卫的路由的canDeactivate
属性的一部分。
import { CanDeactivateGuard } from './can-deactivate.guard';
const routes: Routes = [
{ path: 'your-path', component: YourComponent, canDeactivate: [CanDeactivateGuard] },
// ...
];
通过这样的设置,当用户试图离开YourComponent
时,canDeactivate
方法将被调用。如果该方法返回true
,导航将继续。如果返回false
、一个能解析为false
的Observable或Promise,导航将被取消。
这就是使用Angular 7中的全局守卫CanDeactivate
接口的解决方法。