如何解决带有 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;
}
此守卫/逻辑可用于带有甜蜜确认弹出窗口的路线。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。