Javascript 后退按钮在同一页上创建多个组件

在我的Angular 6应用程序中，有些页面没有响应 当我点击“后退”时，这是恰当的。该站点将生成 多个组件，而不是将用户重定向回 他们刚去的是一个组件

对于有故障的组件，我将component.html页面设置为一个 单线，如：

//home-page.component.html
主页

及

//admin-page.component.html
管理员

然后component.ts页面也使用默认代码

在我的app.component.html上，我只有以下内容：

现在，当我进入主页（通过

Admin>

）时，我正确地看到了这一点（更多或更多） 当我检查网站时，在我的HTML中。请注意，这只是我右键单击-查看页面源代码等时显示的结果HTML。。。我知道我的路由设置是正确的，因为这整件事在谷歌Chrome上可以正常工作，但在Firefox上不行

...
管理

但当我现在按下“后退”键时，我看到了下面的内容

...
家
管理

当我按下“后退”键时，它应该会被删除

admin

并保留了新的

home

，但它同时保留了这两个属性。那我就可以了 按“前进”键，它将有3个组件。知道是什么吗 这是怎么回事？请注意，如果我在“管理员”页面上，单击“主页”链接（它执行routerLink操作），它将正常工作。只是后面的按钮搞乱了

---

您正在混合子组件和布线。对于任何特定组件，都应该使用其中一个

标记之间不应定义任何组件

请注意，在上面的代码中：

          <router-outlet>
              <app-admin-page>admin</app-admin-page>
          </router-outlet>

---

您正在混合子组件和布线。对于任何特定组件，都应该使用其中一个

标记之间不应定义任何组件

请注意，在上面的代码中：

          <router-outlet>
              <app-admin-page>admin</app-admin-page>
          </router-outlet>

---

我也有同样的问题，在某些情况下，当我点击浏览器中的“后退”按钮时，它会将当前组件与为更新的URL哈希定义的组件结合起来。我可以通过在每个组件的构造函数中添加以下内容来解决此问题：

      constructor(private ngZone: NgZone, private router: Router, private location: PlatformLocation, private network: NetworkService) {
    location.onPopState(() => {
      this.ngZone.run(() => this.router.navigateByUrl(location.hash.replace('#/', ''))).then();
    });
  }

---

然后，它正确地导航到前面的组件，而不在页面上合并这两个组件。

我也遇到了同样的问题，在某些情况下，当我点击浏览器中的“后退”按钮时，它会将当前组件与为更新的URL哈希定义的组件合并。我可以通过在每个组件的构造函数中添加以下内容来解决此问题：

      constructor(private ngZone: NgZone, private router: Router, private location: PlatformLocation, private network: NetworkService) {
    location.onPopState(() => {
      this.ngZone.run(() => this.router.navigateByUrl(location.hash.replace('#/', ''))).then();
    });
  }

---

然后，它正确地导航到前面的组件，而不在页面上合并这两个组件。

也许我解释错了，我将编辑。。。。但我使用的是您上面描述的路由。这些组件不是彼此的子组件，它们是完全独立的页面。此外，整个网站在谷歌Chrome上运行得很好，但一旦我开始使用Firefox，它就会变得一团糟。所以我知道我在大部分的代码中都是正确的，但是有一些问题我没有看到，这使得它在Firefox中被搞乱了。如果你在<代码> <代码>标签之间有标签，考虑删除它们。即使它看起来确实有效。那里根本没有标记，我的app.component.html只是

也许我解释错了，我会编辑。。。。但我使用的是您上面描述的路由。这些组件不是彼此的子组件，它们是完全独立的页面。此外，整个网站在谷歌Chrome上运行得很好，但一旦我开始使用Firefox，它就会变得一团糟。所以我知道我在大部分的代码中都是正确的，但是有一些问题我没有看到，这使得它在Firefox中被搞乱了。如果你在<代码> <代码>标签之间有标签，考虑删除它们。即使它看起来确实有效。那里根本没有标签，我的app.component.html只是

我看到了完全相同的问题。在我创建的UI上使用“后退按钮”可以很好地工作，但是我的angular应用程序是用Cordova包装的，并且在Android设备上运行。当用户使用本机android后退按钮时，我看到多个组件堆叠在一起。你是如何解决这个问题的？我不记得对不起-我很快就停止了应用程序，我看到了完全相同的问题。在我创建的UI上使用“后退按钮”可以很好地工作，但是我的angular应用程序是用Cordova包装的，并且在Android设备上运行。当用户使用本机android后退按钮时，我看到多个组件堆叠在一起。你是如何解决这个问题的？我不记得对不起-我很快就停止了应用程序

      constructor(private ngZone: NgZone, private router: Router, private location: PlatformLocation, private network: NetworkService) {
    location.onPopState(() => {
      this.ngZone.run(() => this.router.navigateByUrl(location.hash.replace('#/', ''))).then();
    });
  }