不同的路线在Angular 7中使用相同的组件

Question

我将同一组件用于不同的路由，但是当我在同一组件的路由之间导航时，URL会更改，但是页面内容是相同的。

我使用了此解决方案：

constructor(route:ActivatedRoute) {
  route.url.subscribe(val => {
     //Code Here
  });
}

我现在有预期的行为，但是还有另一个问题：Angular不会在浏览器历史记录中保存以前的URL。

如果流程为：A-> B-> C，其中B和C是相同的组件，如果单击浏览器中的后退按钮，则导航到A而不是B。

Answer 1

之所以发生这种情况是因为Angular默认不保持状态。但是，您可以通过以下方法使其做到这一点：

ngOnInit(){
    window.history.pushState( {} , 'ComponentName', '/path' );
}

您可以编写一个服务，在每次导航到某个组件时将推送新状态。保持状态后，按返回按钮将带您到该组件。

我没有测试过，但是应该可以。

Answer 2

一种以某种角度解决此问题的方法是创建两个新组件，并且每个组件中只有html只是所需组件的选择器。然后在路由器中，将组件定义为两个新组件之一，Angular会将它们注册为不同的组件并解决问题。我以前曾遇到过这个问题，这是我找到的最简单，最直接的解决方案。