Angular登录跳转后页面重叠：登录页与首页同时显示问题求助

登录成功跳转首页后同时显示登录页和首页内容，主要是以下两个常见原因导致：

1. 根组件直接渲染了LoginComponent，未完全通过路由控制组件显示 #

如果你的app.component.html中同时存在<app-login></app-login>标签和<router-outlet></router-outlet>，那么路由跳转后，HomeComponent会在<router-outlet>中渲染，而LoginComponent因为直接写在根组件里不会被移除，导致两个组件内容同时显示。

解决方法：
移除app.component.html中的<app-login></app-login>标签，仅保留<router-outlet></router-outlet>，通过路由访问/login来加载登录组件。如果需要默认显示登录页，可以在路由配置中添加默认路由：

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent }
];

2. 表单提交未阻止默认行为 #

按钮类型为submit，点击时会触发表单的默认提交动作，可能导致页面异常刷新或路由跳转冲突。

解决方法：

• 方法一：修改按钮类型为button

<button type="button" class="btn btn-primary" (click)="login()">Login</button>

• 方法二：在login方法中阻止默认事件

login(event: Event) {
  event.preventDefault(); // 阻止表单默认提交行为
  // 原有登录逻辑...
}

同时修改模板中的点击事件传递$event：

<button type="submit" class="btn btn-primary" (click)="login($event)">Login</button>

额外优化点 #

• 你的isLogin变量目前没有在模板中使用，可以考虑移除；若需要用它控制登录态，建议通过服务管理全局登录状态，而非组件内变量。
• 错误提示变量erroMessage拼写错误，应为errorMessage。

内容的提问来源于stack exchange，提问作者abi jega