当我按下“后退”按钮时,我的模态无法打开,反作用警卫仍会触发

时间:2019-12-10 06:31:29

标签: angular typescript routes rxjs angular-ui-router

如果我尝试在未保存的更改后进行重定向,则一切正常。现在,如果我重定向然后击中后部按钮,则canDeactive实例将触发,甚至会说我的模态至少是通过编程打开的。但什么也不会发生,而且我不能再更改路线了。

这是我的CanDeactivate routeGuard

export interface CanComponentDeactivate {
    canDeactivate(): Observable<boolean> | Promise<boolean> | boolean;
    }

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate();
  }
}

这是我的模态服务

export interface IBaseModal {
  modalId: string;
  navigateAwaySelection: Subject<boolean>;
  isOpen: boolean;
}

@Injectable()
export class ModalService {
  private modals: Map<string, IBaseModal>;
  constructor() {
    this.modals = new Map<string, IBaseModal>();
  }
  close(modalId: string): void {
    if (this.modals.has(modalId)) {
      const modal = this.modals.get(modalId);
      modal.isOpen = false;
    }
  }
  open(modalId: string): boolean | Observable<boolean> {
    if (this.modals.has(modalId)) {
      const modal = this.modals.get(modalId);
      modal.isOpen = true;
      return modal.navigateAwaySelection;
    }
  }
  registerModal(modalId: string, newModal: IBaseModal): IBaseModal {
    if (this.modals.has(modalId)) {
      return this.modals.get(modalId);
    }
    this.modals.set(modalId, newModal);
    return this.modals.get(modalId);
  }
}

这是我的模态

export class OnRedirectSaveModalComponent implements OnInit, IBaseModal {

  modalId = 'redirectModal';
  navigateAwaySelection: Subject<boolean> = new Subject<boolean>();
  isOpen = false;

  constructor(private modalService: ModalService) { }

  ngOnInit() {
    this.modalService.registerModal(this.modalId, this);
  }

  onCancelClick() {
    this.navigateAwaySelection.next(false);
    this.modalService.close('redirectModal');
  }

  onOkClick() {
    this.navigateAwaySelection.next(true);
    this.modalService.close('redirectModal');
  }
}

在这里被称为

  canDeactivate(): Observable<boolean> | boolean {
    if (this.dataLoaded && this.isChanged) {
      return this.modalService.open('redirectModal');
    } else {
      return true;
    }
  }

0 个答案:

没有答案