角路由器和后退按钮

Question

我有一个Angular 4应用程序，使用@ angular / router中的Router进行导航

导航结构非常简单，包括：

/products
/products/:productId
/products/:productId/edit-details
/products/:productId/edit-images
etc

路由器模块都可以正常工作。

在以下情况下，保存数据后出现的“浏览器后退”按钮是我遇到的问题：

1. 用户在“ / products / 5”屏幕上
2. 用户转到“ / products / 5 / edit-details”屏幕
3. 用户进行更改，然后单击“保存”
4. 应用程序保存数据并将用户导航回“ / products / 5”屏幕

完成上述操作后，用户单击“浏览器后退”按钮。我认为大多数用户都希望“后退”按钮将其带入“产品列表”级别，但实际上会将其带回“ / products / 5 / edit-details”屏幕，因为这是他们使用的最后一条路线。

这可能是网站与单页应用程序中预期行为之间的冲突。SPA中的外观比传统网站更像是App。在大多数应用程序中，设备的后退按钮用作“上/后退”按钮（例如，在使用您获得的“联系人”应用程序的手机上：联系人列表->联系人详细信息->编辑联系人->保存[带您联系详细信息]->按“后退”按钮可将用户带到“联系人列表”，而不是返回“编辑联系人”屏幕，因此，该用户已受过教育，可以从设备上的“后退”按钮期待这种行为。

我已经尝试过使用：

this.location.back();

代替

this.router.navigate(['../'], { relativeTo: this.route });

用户单击保存后

这确实部分实现了我想要的功能，但是这为“转发”按钮留下了一个不必要的选项-绕过路由器模块似乎也有些错误。

删除后，此行为尤其令人讨厌：例如，如果转到“ / products /：productId / edit-images /：imageId”并删除图像，则不存在的路由将保留在“返回”历史记录中

我也尝试过使用“ skipLocationChange”，但是并没有达到预期的效果，就好像我在Link中使用skipLocationChange进入“ edit-details”屏幕一样，然后用户按下“后退”按钮然后绕过了： productId屏幕，然后直接转到“ / products”列表

有什么建议么？