Angular 离开页面前发出警告-但如果路由匹配则不发出警告

我实施了以下方法，在离开表单之前警告访问者：

挂起的更改。guard.ts:

从'@angular/router'导入{CanDeactivate}；
从“@angular/core”导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
导出接口组件CandeActivate{
canDeactivate:（）=>布尔|可观察；
}
@可注射（）
导出类PendingChangesGuard实现CanDeactivate{
canDeactivate（组件：组件canDeactivate）：布尔值|可观察{
//如果没有挂起的更改，只允许停用；否则请先确认
返回组件.canDeactivate（）？
正确：
//注意：此警告消息仅在angular应用程序中的其他位置导航时显示；
//离开angular应用程序导航时，浏览器将显示一般警告消息
//看http://stackoverflow.com/a/42207299/7307355
确认（'警告：如果返回，您将不得不重新选择任何图像。按“取消”以保留页面，或按“确定”以丢失这些更改'）；
}
}

在我的组件类中：

@HostListener（'window:beforeunload'）
canDeactivate（）：可观察的|布尔值{
返回false；
//插入逻辑以检查此处是否存在挂起的更改；
//返回true将导航而不进行确认
//返回false将在导航离开之前显示确认对话框
}

这一切都很好！但是 在我使用的组件中，有一个导航条件：

this.router.navigate（['/thank-you'，ads'，res.data.slug]）；

我怎样才能让我的应用程序导航到“/谢谢”，而不引起“警告”，因为此时表单已经提交

---

谢谢

您只需在

canDeactive

hostListener中插入逻辑来检查表单是否正在提交。 如果您有一个提交表单的按钮，只需在单击时将某个私有字段

formBeingSubmitted

设置为true，然后在逻辑中检查它

private formBeingSubmitted=false；
@HostListener（'窗口：在卸载之前'）
canDeactivate（）：可观察的|布尔值{
如果（本表格已提交）{
返回真值
}
返回false；
//插入逻辑以检查此处是否存在挂起的更改；
//返回true将导航而不进行确认
//返回false将在导航离开之前显示确认对话框
}
公共onSubmit（）{
this.formBeingSubmitted=true；
}

您只需在

canDeactive

hostListener中插入逻辑，检查表单是否正在提交。为了确保您有一个提交表单的按钮，只需在单击时将某个私有字段

formBeingSubmitted

设置为

true

，然后检查其逻辑。那行吗？可能，你能回答吗？谢谢