Angular路由异常：访问/student端点未显示Student组件，仍显示首页

我创建了一个Student组件，但访问对应的/student端点时，该组件并未正常显示，反而始终展示首页内容。以下是相关代码文件及截图：

Student组件代码 #

TypeScript文件 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

HTML模板 #

<p>student works!</p>

路由配置（app.routing.module.ts） #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { StudentComponent } from './components/student/student.component';

const routes: Routes = [{ path: 'student', component: StudentComponent },];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

App组件文件 #

HTML模板（app.component.html） #

<h1>Grade Management</h1>

TypeScript文件（app.component.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'GradeManagement_FrontEnd';
}

App模块（app.module.ts） #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentComponent } from './components/student/student.component';

@NgModule({
  declarations: [
    AppComponent,
    StudentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

截图 #

核心问题是**app.component.html中缺少<router-outlet>标签**。Angular的路由系统依赖这个标签来渲染匹配到的路由组件，你的根组件模板里只有标题内容，没有提供路由组件的渲染出口，所以无论访问哪个路由，都只会显示根组件的内容。

修复步骤： #

1. 修改app.component.html，添加路由出口：

<h1>Grade Management</h1>
<router-outlet></router-outlet>

2. （可选）配置默认路由（优化体验）：
   如果需要在访问根路径时重定向到Student组件或显示首页组件，可以在app.routing.module.ts中添加默认路由规则：

const routes: Routes = [
  { path: 'student', component: StudentComponent },
  // 重定向根路径到student页面
  { path: '', redirectTo: '/student', pathMatch: 'full' },
];

完成以上修改后，重新运行项目，访问/student就能正常显示Student组件的内容了。

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