Question

在我的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事情），则它可以正常工作。只是后退按钮弄乱了。

Answer 1

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

import os for image in images: fruit = image.split(".")[0] if not os.path.isdir(fruit): os.mkdir(fruit) os.rename(os.path.join(fruit, image))标签之间不应定义任何组件。

请注意上面的代码：

<router-outlet></router-outlet>

因此，将这两个组件都显示为子组件，如下所示：

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

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

OR

使用路由：

      <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>

Answer 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();
    });
  }

然后正确导航到上一个组件，而无需在页面上将两者组合在一起。

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

2 个答案: