时间戳

首页 > 解决方案 > 返回一个 Observable来自 canActivate 并重定向为 false

angular - 返回一个 Observable来自 canActivate 并重定向为 false

问题描述

我的 Angular 应用程序中有一个反应形式。每次表单值更改时，我都会在我的公共服务中的 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
        }
      })
    )
  }

标签： angulartypescript

解决方案

我同意 Aluan Haddad 的评论。Angular 的 canDeactive Guard 应该完全符合您的要求。看看：Angular CanDeactivate

推荐阅读