Angular 7中的不同路由相同组件答案

【问题标题】：Different routes same component in Angular 7Angular 7中的不同路由相同组件
【发布时间】：2019-07-17 16:40:38
【问题描述】：

我对不同的路由使用相同的组件，但是当我在相同组件的路由之间导航时，URL 会发生变化，但页面内容是相同的。

我使用了这个解决方案：

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

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

如果流程是：A -> B -> C 其中 B 和 C 是同一个组件，如果我点击浏览器中的后退按钮，我会导航到 A 而不是 B。

【问题讨论】：

【解决方案1】：

这是因为 Angular 默认不维护状态。但是，您可以通过以下方式实现：

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

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

我没有对此进行测试，但它应该可以工作。

【讨论】：

【解决方案2】：

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

【讨论】：