后退按钮在同一页面上创建多个组件答案

【问题标题】：Back button creating multiple components on the same page后退按钮在同一页面上创建多个组件
【发布时间】：2019-01-18 11:21:53
【问题描述】：

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

对于有问题的组件，我将component.html页面设为一个单行如：

// home-page.component.html home

和

// admin-page.component.html admin

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

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

<router-outlet></router-outlet>

现在当我进入主页时（通过<a routerLink="/admin">Admin></a>），我正确地看到了这个（更多或更少）在我检查网站时在我的 HTML 中。请注意，这只是我右键单击时出现的 RESULTING HTML - 查看页面源代码等...我知道我的路由设置正确，因为整个事情在 Google Chrome 中有效，但在 Firefox 中无效。

<html> <head>...</head> <body> <app-root> <router-outlet> <app-admin-page>admin</app-admin-page> </router-outlet> </app-root> </body> </html>

但是当我现在按“返回”时，我会看到以下内容

<html> <head>...</head> <body> <app-root> <router-outlet> <app-home-page>home</app-home-page> <app-admin-page>admin</app-admin-page> </router-outlet> </app-root> </body> </html>

当我按下“返回”时，它应该删除 <app-admin-page>admin</app-admin-page> 只是保留了新的 <app-home-page>home</app-home-page>，但两者都保留。那我可以按“前进”，然后它将有 3 个组件。任何想法是什么在这里进行吗？请注意，如果我在“管理”页面上并单击“主页”链接（它执行 routerLink 的操作），它可以正常工作。只是后退按钮搞砸了。

【问题讨论】：

我看到了完全相同的问题。在我创建的 UI 上使用“后退按钮”可以正常工作，但是我的 Angular 应用程序包含在 Cordova 中并存在于 Android 设备上。当用户使用原生 android 后退按钮时，我看到多个组件相互堆叠。你是如何解决这个问题的？
我不记得很抱歉 - 在那之后我很快就停止了该应用程序

标签： javascript angular angular2-routing angular6

【解决方案1】：

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

<router-outlet></router-outlet> 标签之间不应定义任何组件。

上面代码中的注意事项：

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

所以要么像这样将两个组件都显示为子组件：

      <app-root>
         <app-home-page>home</app-home-page>
         <app-admin-page>admin</app-admin-page>
      </app-root>

这将显示两个组件，一个在另一个之上。

或

使用路由：

      <app-root>
          <router-outlet></router-outlet>
      </app-root>

这将在此位置一次显示一个组件。使用路由配置来定义要在路由器出口中显示的组件。

RouterModule.forRoot([
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'admin', component: AdminComponent }
]),

【讨论】：

也许我解释错了，我会编辑....但我正在使用您上面描述的路由。这些组件不是彼此的子组件，而是完全独立的页面。此外 --- 整个网站在 Google Chrome 中运行良好，但是一旦我开始使用 Firefox 就搞砸了。所以我知道我在几乎所有内容中都正确编码，但只是有一些我没有看到的问题导致它在 Firefox 中搞砸了。
如果您的<router-outlet></router-outlet> 标签之间有标签，请考虑删除它们……即使它看起来确实有效。
那里根本没有标签，我的 app.component.html 只是 <router-outlet></router-outlet>

【解决方案2】：

我遇到了同样的问题，在某些情况下，当我点击浏览器中的“返回”按钮时，它会将当前组件与为更新的 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();
    });
  }

然后它会正确导航到前面的组件，而无需在页面上合并两者。

【讨论】：