Angular 2路由问题：登录跳转主页时两个组件同时显示

嘿，我来帮你解决这个问题！这种两个组件同时显示的情况，十有八九是路由配置或者根组件模板的问题，咱们一步步排查解决：

你是不是在app.component.html里直接同时写了<app-login>和<app-mainpage>？比如这种写法：

<app-login></app-login>
<app-mainpage></app-mainpage>

如果是这样，不管你怎么操作，两个组件都会一直渲染在页面上。正确的做法是只保留路由出口，让路由系统来决定当前显示哪个组件：

<router-outlet></router-outlet>

你需要在app.module.ts里配置路由映射，指定不同路径对应不同的组件。先导入必要的模块和组件，再定义路由规则：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router'; // 导入路由核心模块

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component'; // 替换成你的登录组件实际路径
import { MainpageComponent } from './mainpage/mainpage.component'; // 替换成你的主页组件实际路径

// 定义路由规则
const appRoutes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' }, // 默认加载时跳转到登录页
  { path: 'login', component: LoginComponent }, // 登录页路由
  { path: 'main', component: MainpageComponent }, // 主页路由
  { path: '**', redirectTo: '/login' } // 匹配不到的路径统一跳回登录页
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    MainpageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) // 注册路由规则到应用
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

登录成功后，不要手动去渲染Mainpage组件，而是用Angular的Router服务来实现页面跳转。先注入Router，再在登录验证通过后调用导航方法：

import { Component } from '@angular/core';
import { Router } from '@angular/router'; // 导入Router服务

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

  constructor(private router: Router) { } // 注入Router服务

  // 你的登录处理方法
  handleLogin() {
    // 这里写你的登录验证逻辑，比如调用后端接口校验账号密码
    const loginSuccess = true; // 假设验证通过

    if (loginSuccess) {
      this.router.navigate(['/main']); // 导航到主页路径
    }
  }
}

• 确认没有在Login组件的模板里直接引入Mainpage组件
• 打开浏览器控制台，看看路由跳转时有没有报错信息

这样调整后，登录前页面只会显示Login组件，登录成功后路由跳转到/main，就只会显示Mainpage组件了。

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