角度路由"opens"前一个页面之上的新页面，并在每个路由操作中保持堆叠

Question

所以我有一个使用 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>

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

不确定这是否相关，但我正在我的应用程序组件中使用<router-outlet>.html

Answer 1

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

Answer 2

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

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

我有描述登录组件是这里的一个例子。