[英]Angular 11: Make canDeactivate observable wait for nested function
[英]Angular8 RXJS CanDeactivate wait for result of observable before deactivation
我正在嘗試使用 CanDeactivate 防護來檢測用戶何時離開組件。 目的是 #1 檢查當前用戶是否擁有記錄上的“正在編輯”鎖,如果是 #2,則調用 observable 來更新數據庫。
我擁有的代碼部分工作,但存在不總是釋放鎖的競爭條件,可能是因為在調用下一個 return 語句時,對this.updateIsBeingEdited$(false)
的訂閱並不總是完成。 所以我知道這沒有正確實施。
如何使this.updateIsBeingEdited$
observable 在 canDeactivate 返回值之前完成?
返回值應始終為 true,因為組件應始終停用,它只需要確保this.updateIsBeingEdited$.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
);
}
警衛
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;
}
}
謝謝,這是似乎正在工作的更新代碼。
零件
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
);
}
警衛
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();
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.