角度路由在前一个页面之上“打开”新页面，并在每个路由操作中保持堆叠答案

【问题标题】：Angular routing "opens" new page on top of the previous one and keep stacking in every route action角度路由在前一个页面之上“打开”新页面，并在每个路由操作中保持堆叠
【发布时间】：2020-05-01 07:16:51
【问题描述】：

所以我有一个使用 import {RouterModule, Routes } from '@angular/router' 的 angular4 应用程序

我的路线配置是这样设置的：

const appRoutes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full',canActivate: [AuthGuard]},
  {path:'login', component:LoginComponent},  
  {path:'home', component:HomeComponent, canActivate: [AuthGuard]},  
  {path:'profile', component:UserProfileComponent, canActivate: [AuthGuard] },
  {path:'record', component:RecordComponent, canActivate: [AuthGuard]},
]

在我的导航栏 html 中使用

<ul class="navbar-nav ml-auto">
            <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
                <a [routerLink]="['/home']" class="nav-link"><i class="fas fa-home fa-2x"></i></a>
            </li>
            <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
                <a [routerLink]="['/profile']" class="nav-link"><i class="fas fa-user fa-2x"></i></a>
            </li>
        </ul>

在我的页面之间路由。问题是，每次我点击导航栏中的链接时，都会出现新页面，但它在前一个页面的顶部，我的意思是如果我向下滚动我可以看到上一页（但导航栏是不重复）

不确定这是否相关，但我在 app-component.html 中使用 <router-outlet>

【问题讨论】：

听起来您的浏览器出现错误。打开开发者控制台（F12 with chrome）看看是什么原因造成的。
你能告诉我们包含路由器插座的模板吗？
@Z.Bagley 是的，这就是问题所在......你能向我解释为什么会这样吗？我的意思是为什么错误会导致这种效果？
看看this post。答案之一是 this issue 和 this other one。
Angular 编译器在渲染它之前实际上并不知道 DOM 会是什么样子，如果一个链接打开的 DOM 有问题，它会尝试为新组件构建 DOM 并失败中途。很多时候编译器会停止运行，并且在发生这种情况后您无法通过很多应用程序进行路由，有时会出现多个路由器插座，有时屏幕会变白……这只是您编写代码的标志之一打破一些东西;）

标签： angular typescript angular-routing angular-router angular-router-guards

【解决方案1】：

一个错误可能会导致在路由器插座中显示一个组件的中断，请尝试在从一个链接切换到另一个链接时检查控制台javascript中是否有错误

【讨论】：

【解决方案2】：

这是因为您在 app.component.html 中放置了登录 html。替换当前路由的模板，除了这个文件中所有的html都是常量。

您可以创建一个单独的登录组件。默认情况下导航到登录组件。不要在 app.component.html 中保留登录 html

我已经描述了登录组件是这里的一个例子..

【讨论】：