带有 SweetAlert 的 AppSidebarNav 点击功能

问题描述

场景：例如，您在“选项 4”页面，并希望通过单击侧栏来单击“选项 5”页面。预计会弹出确认弹窗，提示“选项4”中有不完整的字段（感叹号指示符）。

*顺便说一下，单击下一步和后退按钮时这种行为是可以的。如下图所示。单击侧边导航栏时会出现此行为。

当我在互联网上搜索可能的解决方案时。我找到了这篇文章，https://github.com/coreui/coreui-react/issues/79。

我已经试过了，

{
  name: 'Option 4',icon: 'icon-target',url: `${path}/${PathConstants.Index}/${PathConstants.Option4}`,attributes: {onClick:  showConfirmationPopup(validation?.formOption4)}
},{
  name: 'Option 5',icon: 'icon-notebook',url: `${path}/${PathConstants.Index}/${PathConstants.Option5}`
}

我想要的是，当单击选项 4（从侧面导航栏）时，它会触发 showConfirmationPopup() 并带有一个参数 validation?.formOption4 来检查是否选项 4 中的字段已完成。如果字段填写完整，则不会显示弹出窗口，它只会在选项 5 上导航，否则会显示弹出窗口。

showConfirmationPopup 的逻辑如下所示。

function showConfirmationPopup(isComplete: boolean) {

if (!isComplete) {
  NotifUtils.showConfirmMessage('There are incomplete required fields. Are you sure you want to move in the next page?',() => { //when "Ok" is clicked from confirmation popup,it will navigate to option 5},() => { //when "Cancel" is clicked from confirmation popup,it will not navigate to option 5});
} else {
  //Continue to Navigate
}
}

Sweetalert 弹出窗口：https://sweetalert2.github.io/

对于此代码，会显示弹出窗口，但我无法单击“确定”/“取消”按钮，因为弹出窗口会自动关闭。我被这些代码困住了。我希望弹出窗口保留在用户界面中，如果选项 4 中的字段不完整，让我选择是否要进入下一页（选项 5）。

如果您能提供任何帮助，我们将不胜感激。提前致谢。

解决方法

问题解决了。在这种情况下可以使用 Angular 中的路由保护 (CanDeactivate)。 示例 CanDeactivate 防护：

export class CanDeactivateComponentGuard implements CanDeactivate<MyComponent> {

canDeactivate(component: MyComponent,route: ActivatedRouteSnapshot,state: RouterStateSnapshot) {
  const name = component.Name;
  const subject = new Subject<boolean>();
  
  if (name === '') {
      NotifUtils.showConfirmMessage(`Proceed? Your name is empty`,() => {
        subject.next(true); //call back when "Yes" button is clicked
      },() => {
        subject.next(false); //call back when "No" button is clicked
      });
      return subject.asObservable();
  };
  return  true;
}

此守卫/逻辑可用于带有甜蜜确认弹出窗口的路线。