如何解决canDeactive | observable 保持其初始值
- this example 看到的示例
这是我的 canDeactivate Guard:
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate,route: ActivatedRouteSnapshot,state: RouterStateSnapshot) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
这就是我在 HomeComponent 路由中的称呼:
{ path: 'home',component: HomeComponent,canActivate: [AuthGuard],canDeactivate: [CanDeactivateGuard]},
private backButtonEnabled = new BehaviorSubject<boolean>(true);
currentBackButtonEnabled = this.backButtonEnabled.asObservable();
changeCurrentBackButtonEnabled(goBack: boolean){
this.backButtonEnabled.next(goBack);
}
在另一个组件 FiltersComponent 中,我有这个功能:
openFilters() {
...
this.myService.changeCurrentBackButtonEnabled(false);
}
在 HomeComponent 中,我像这样调用 canDeactivate:
canDeactivate(): Observable<boolean> | boolean | Promise<boolean> {
this.myService.currentBackButtonEnabled.subscribe(res => {
console.log(res) //ALWAYS TRUE
})
return this.myService.currentBackButtonEnabled;
}
在应用模块中:
...
providers: [
CanDeactivateGuard,MyService
],
问题说明:
currentBackButtonEnabled 始终为真,即使当用户(单击)openFilters() 函数时,currentBackButtonEnabled 变为假
解决方法
我不完全理解你的代码,但在你的保护
principle=int(principle)
rate=int(rate)
time=int(time)
在类型脚本类/Angular 组件类中不能有同名的变量和函数。因此,这一行检查是否存在 return component.canDeactivate ? component.canDeactivate() : true;
——这总是正确的;因为你在那个组件上用那个名字定义了一个函数。
如果 canActivate
存在,则执行。
并根据您的代码:
component.canDeactivate()
如果 canDeactivate(): Observable<boolean> | boolean | Promise<boolean> {
return this.service.currentBackButtonEnabled;
}
方法返回的是 Observable 或 Promise,那么只要定义了该值,从布尔的角度来看,它将被视为 true。
此代码返回 false 的唯一情况是 canActivate()
返回布尔值 false。如果你想从 Observable 或 Promise 中获取结果,你必须订阅它。
您应该订阅 observable 以获取其新值。
this.guardService.canDeactivate().pipe(
catchError(err => {
this.logger.error('Observable error',err);
throw err;
})
)
.subscribe((newState) => { // do something }
});
此外,您应该将服务注入到组件中,然后将事件广播到应该对其更改采取行动的组件,而不是相反。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。