如何在不在 ts 文件内的路由中使用 canDeactivate？

Question

我已经实现了守卫并将其添加到相关的路由路径中："quotes"， children: [ { 路径: "", 组件: QuotesComponent},<br> { 路径："create"，组件：CreateQuoteComponent，canDeactivate：[CanDeactivateGuard]}，<br> { 路径：“：id”，组件：CreateQuoteComponent，canDeactivate：[CanDeactivateGuard]}
]

我还在相关组件中添加了一个条件，例如：

canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    let agreeToLeave = false;
    if (this.changesSaved === false) {
      let message = 'You have not saved your current work and will lose changes. Are you want to proceed?';
      let data = { 'message': message, 'toShowCancel': true, 'buttonYesCaption': 'Yes', 'buttonNoCaption': 'No' };
      const dialogRef = this.dialog.open(YesNoComponent, {
        width: '600px',
        height: '250px',
        data: data
      });

      dialogRef.afterClosed().subscribe(result => {
        if (result) {
          agreeToLeave = true;
          return true;
        }
      });
      return agreeToLeave;
    }else{
      return true;
    }
  }

我看到模态 window 每次单击任何按钮时都会询问，但如果我单击 "yes" 它不会转到相关页面。

同样，在我的例子中，所有路由都在 html 文件中，例如：

<mat-list-item [routerLink]="['/events']" routerLinkActive="activated">
    <button mat-icon-button>
      <mat-icon>comment</mat-icon>
    </button>

非常感谢]1

Answer 1

您的 afterClosed() 是一个异步操作。实际上这是一个Promise。在您的模式关闭之前，您 return false 使用默认值 agreeToLeave 。而不是 returning 布尔值只是 return Promise 本身。

canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.changesSaved) {
      return true;
    }

    const message = 'You have not saved your current work and will lose changes. Are you want to proceed?';
    const data = { 'message': message, 'toShowCancel': true, 'buttonYesCaption': 'Yes', 'buttonNoCaption': 'No' };
    const dialogRef = this.dialog.open(YesNoComponent, {
      width: '600px',
      height: '250px',
      data: data
    });

    return dialogRef.afterClosed(); // if necessary map to boolean with map operator
  }

编辑：对您的代码进行了一些改进

如何在不在 ts 文件内的路由中使用 canDeactivate？

How to use canDeactivate with routing not inside ts file?

angular

angular-ui-router

angular-material