2

我有一个 Angular2 应用程序。它的一个组件实现了 CanDeactivate 接口，以确认用户离开页面的导航。下面是路由守卫的实现：

export class DeactivateGuard implements CanDeactivate<MyComponent> {
  canDeactivate(component: MyComponent) {
  let can = component.canDeactivate();
  return can;
  }
}

这是组件的代码：

canDeactivate() {
if (confirm("Are you sure you want to navigate away?")) {      
  return true;
}
else {
  return false;
}
}

现在，我想显示一个自定义模式窗口而不是浏览器的确认框。我用 Telerik 的 Kendo UI 构建了这样的窗口：

<kendo-dialog title="Please confirm" *ngIf="userConfirm">
    Are you sure you want to navigate away?
    <kendo-dialog-actions>
        <button kendoButton class="k-button" (click)="closeConfirm('no')">No</button>
        <button kendoButton class="k-button" (click)="closeConfirm('yes')" primary="true">Yes</button>
    </kendo-dialog-actions>
</kendo-dialog>

如果我在代码中的任何位置设置userConfirm = true ，则此模式窗口有效，除了 canDeactivate() 方法。

canDeactivate() {
this.userConfirm = true; //Does not work. The modal does not show up.
}

如何使用此模式窗口来获取用户的输入？

谢谢你。

4

2 回答 2

1

component.canDeactivate();我认为您在从您的身份验证守卫执行时失去了范围。试试这个：

export class DeactivateGuard implements CanDeactivate<MyComponent> {
  canDeactivate(component: MyComponent) {
    return (() => component.canDeactivate())();
  }
}
于 2017-08-25T22:15:55.060 回答
0

我不确定 Kendo 是如何工作的，但是当仅使用 confirm() 时，您会在 canDeactivate() 函数中返回该函数，如下所示：

canDeactivate() {
  return confirm("Are you sure you want to navigate away?");
}

您可以在此处阅读有关 canDeactivate()的更多信息。

于 2017-08-25T22:09:25.487 回答