Angular8 RXJS CanDeactivate在停用前等待可观察结果

我试图使用CanDeactivate防护来检测用户何时离开组件。其目的是#1检查当前用户是否拥有记录上的“正在编辑”锁#2如果是，调用observable更新数据库

我的代码部分正常工作，但存在一个争用条件，锁并不总是被释放，这可能是因为

this.updatesBeingedited$（false）

的订阅并不总是在调用下一个return语句时完成。所以我知道这没有得到正确的实施

如何使

this.updatesBeingedited$

observable在canDeactivate返回值之前完成

返回值应始终为true，因为组件应始终停用，它只需确保在停用完成之前完成

this.updatesBeingedited$.subscribe（）

组件

  canDeactivate(): Observable<boolean> | boolean {

    // Check if Is Being Edited must be removed
    if (this.mustReleaseIsBeingEdited()) {
      this.removeIsBeingEditedSub = this.updateIsBeingEdited$(false).subscribe(result => {
        // QUESTION: How to wait until this is complete before allowing component to deactivate?
        return true;
      }, err => { console.error(err); }, () => { });

      // Always allow deactivation
      return true;
    } else {
      return true;
    }

  }

  private updateIsBeingEdited$(isBeingEdited): Observable<boolean> {

    const editedObj = {
      _id: this.record._id,
      IsBeingEdited: isBeingEdited,
      EditedBy: this.accessLevelService.getUserId()
    }

    return this.httpService!.postData$(
      `records/_id/${editedObj._id}/IsBeingEdited/`,
      editedObj
    );

  }

  canDeactivate(): Observable<boolean> | boolean {

    // Check if Is Being Edited must be removed
    if (this.mustReleaseIsBeingEdited()) {
      return this.updateIsBeingEdited$(false);
    } else {
      return of(true);
    }

  }

  private updateIsBeingEdited$(isBeingEdited): Observable<boolean> {

    const editedObj = {
      _id: this.record._id,
      IsBeingEdited: isBeingEdited,
      EditedBy: this.accessLevelService.getUserId()
    }

    return this.httpService!.postData$(
      `records/_id/${editedObj._id}/IsBeingEdited/`,
      editedObj
    );

  }

canDeactivate（）：可观察的布尔值{
//检查是否必须删除正在编辑的
if（this.mustReleaseIsBeingEdited（））{
this.removiesbeingeddedsub=this.updateIsBeingEdited$（false）.subscribe（结果=>{
//问题：在允许组件停用之前，如何等待此操作完成？
返回true；
}，err=>{console.error（err）；}，（）=>{}；
//始终允许停用
返回true；
}否则{
返回true；
}
}
私有更新beingedited$（isBeingEdited）：可见{
常量editedObj={
_id：这个。记录。\u id，
IsBeingEdited:IsBeingEdited，
EditedBy:this.accessLevelService.getUserId（）
}
返回此.httpService！.postData$(
`记录/\u id/${editedObj.\u id}/IsBeingEdited/`，
编辑部
);
}

防护装置

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}
/**
 * Guard to notify client that user has navigated away from route
 * Implemented in component for managing record locks only
 */
@Injectable({
  providedIn: 'root'
})
export class RecordLocksGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    if (!component) {
      return true;
    }
    component.canDeactivate();
    // Always allow component to deactivate
    return true;
  }
}

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}
/**
 * Guard to notify client that user has navigated away from route
 * Implemented in component for managing record locks only
 */
@Injectable({
  providedIn: 'root'
})
export class RecordLocksGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    if (!component) {
      return of(true);
    }
    return component.canDeactivate();
  }
}

导出接口组件CandeActivate{
canDeactivate:（）=>布尔|可观察；
}
/**
*卫兵通知客户端用户已离开路由
*在组件中实现，仅用于管理记录锁
*/
@注射的({
providedIn:'根'
})
导出类RecordLocksGuard实现CanDeactivate{
canDeactivate（组件：组件canDeactivate）：布尔值|可观察{
如果（！组件）{
返回true；
}
component.canDeactivate（）；
//始终允许停用组件
返回true；
}
}

谢谢，下面是更新后的代码，看起来正在运行

组件

  canDeactivate(): Observable<boolean> | boolean {

    // Check if Is Being Edited must be removed
    if (this.mustReleaseIsBeingEdited()) {
      this.removeIsBeingEditedSub = this.updateIsBeingEdited$(false).subscribe(result => {
        // QUESTION: How to wait until this is complete before allowing component to deactivate?
        return true;
      }, err => { console.error(err); }, () => { });

      // Always allow deactivation
      return true;
    } else {
      return true;
    }

  }

  private updateIsBeingEdited$(isBeingEdited): Observable<boolean> {

    const editedObj = {
      _id: this.record._id,
      IsBeingEdited: isBeingEdited,
      EditedBy: this.accessLevelService.getUserId()
    }

    return this.httpService!.postData$(
      `records/_id/${editedObj._id}/IsBeingEdited/`,
      editedObj
    );

  }

  canDeactivate(): Observable<boolean> | boolean {

    // Check if Is Being Edited must be removed
    if (this.mustReleaseIsBeingEdited()) {
      return this.updateIsBeingEdited$(false);
    } else {
      return of(true);
    }

  }

  private updateIsBeingEdited$(isBeingEdited): Observable<boolean> {

    const editedObj = {
      _id: this.record._id,
      IsBeingEdited: isBeingEdited,
      EditedBy: this.accessLevelService.getUserId()
    }

    return this.httpService!.postData$(
      `records/_id/${editedObj._id}/IsBeingEdited/`,
      editedObj
    );

  }

canDeactivate（）：可观察的布尔值{
//检查是否必须删除正在编辑的
if（this.mustReleaseIsBeingEdited（））{
返回此.UpdatesBeingedited$（false）；
}否则{
返回（真）；
}
}
私有更新beingedited$（isBeingEdited）：可见{
常量editedObj={
_id：这个。记录。\u id，
IsBeingEdited:IsBeingEdited，
EditedBy:this.accessLevelService.getUserId（）
}
返回此.httpService！.postData$(
`记录/\u id/${editedObj.\u id}/IsBeingEdited/`，
编辑部
);
}

防护装置

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}
/**
 * Guard to notify client that user has navigated away from route
 * Implemented in component for managing record locks only
 */
@Injectable({
  providedIn: 'root'
})
export class RecordLocksGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    if (!component) {
      return true;
    }
    component.canDeactivate();
    // Always allow component to deactivate
    return true;
  }
}

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}
/**
 * Guard to notify client that user has navigated away from route
 * Implemented in component for managing record locks only
 */
@Injectable({
  providedIn: 'root'
})
export class RecordLocksGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    if (!component) {
      return of(true);
    }
    return component.canDeactivate();
  }
}

导出接口组件CandeActivate{
canDeactivate:（）=>布尔|可观察；
}
/**
*卫兵通知客户端用户已离开路由
*在组件中实现，仅用于管理记录锁
*/
@注射的({
providedIn:'根'
})
导出类RecordLocksGuard实现CanDeactivate{
canDeactivate（组件：组件canDeactivate）：布尔值|可观察{
如果（！组件）{
返回（真）；
}
返回组件.canDeactivate（）；
}
}

guard不应返回布尔值，而应返回可观察值。您的canDeactivate（）方法也不应该返回布尔值，也不应该订阅任何可观察的。它应该返回一个可观察的（将由警卫返回）。