带有 SweetAlert 的 AppSidebarNav 的单击功能答案

【问题标题】：Click function for AppSidebarNav with SweetAlert带有 SweetAlert 的 AppSidebarNav 的单击功能
【发布时间】：2021-01-06 10:51:58
【问题描述】：

场景：比如你在“选项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/

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

您能提供的任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： angular uinavigationbar sidebar sweetalert2 core-ui

【解决方案1】：

问题解决了。在这种情况下，可以使用 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;
}

这个守卫/逻辑可以用在带有sweetalert确认弹出窗口的路由上。

【讨论】：