停止卸载组件，直到用户从对话框中选择“保存”或“关闭”

Question

我有一个带有一些表单输入的组件。如果我在修改当前组件中的某些内容后移动到另一个组件，那么它应该等到用户在打开的对话框窗口中单击“确定”或“保存”。

我能够从ngOnDestroy函数触发对话框，但到那时，下一个组件已经加载了。

这样做是否有解决方法？

我已经尝试过，canDeactivate但是我的情况不行。

我正在使用Angular 4

Answer 1

尝试canDeactivate，它是唯一干净的方式。在那里打开对话框，如果需要防止导航，则返回您解决的承诺（false）。

或者，如果你使用mat-dialog，你只需返回dialogRef.afterClose（），它返回对话框结果的可观察值。

如果你需要在用户点击保存时在组件中进行api调用，你也可以将afterClose observable切换到该地址。