![](/img/trans.png)
[英]Returning an Observable<boolean> from canActivate method and redirect on false
[英]Returning an Observable<boolean> from canActivate and redirect on false
我的 Angular 應用程序中有一個反應形式。 每次更改表單值時,我都會將 Boolean 存儲在我常用服務的 BehaviorSubject 中。
我創建了一個路由守衛,我想根據 BehaviorSubject 的值停止導航,如果是真的我想停止導航。 我在下面嘗試過這種方法,但它不起作用。 也許我沒有正確訂閱。
零件
onCreateGroupFormValueChange() {
const initialValue = this.createGroupForm.value;
this.createGroupForm.valueChanges.subscribe((value) => {
this.hasUnsavedData = Object.keys(initialValue).some(
(key) => this.createGroupForm.value[key] != initialValue[key]
);
this._helperService.onFormValueChange(this.hasUnsavedData);
});
}
服務
private _unsaveDataSource = new BehaviorSubject<boolean>(false);
public unsavedForm$ = this._unsaveDataSource.asObservable();
onFormValueChange(hasData : boolean){
this._unsaveDataSource.next(hasData);
}
警衛
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
):
| Observable<boolean | UrlTree>
| Promise<boolean | UrlTree>
| boolean
| UrlTree {
return this._helperService.unsavedForm$.pipe(
map(e => {
if(e){
return false
}else{
return true
}
})
)
}
我同意 Aluan Haddad 的評論。 Angular 的 canDeactive Guard 應該完全符合您的要求。 看看: Angular CanDeactivate
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.