Angular 17路由异常：URL变化但组件不渲染，仅首页显示

核心问题分析 #

你当前的问题根源在于将业务组件EmployeesComponent作为了应用的根组件，而Angular应用的根组件应该是一个仅承载路由出口的壳组件（通常是AppComponent）。当你导航到/add时，AddEmployeeComponent确实会渲染到EmployeesComponent内部的<router-outlet>中，但EmployeesComponent本身作为根组件会一直保留在DOM中，导致首页内容始终显示，看起来页面没有切换。

具体修改步骤 #

1. 创建/恢复AppComponent作为根组件 #

如果项目中没有AppComponent，新建以下文件：

app.component.ts

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

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

app.component.html

<router-outlet></router-outlet>

2. 修改AppModule配置 #

将根组件切换为AppComponent，并添加其声明：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { EmployeesComponent } from './employee/employees/employees-component/employees-component';
import { EmployeesService } from './employee/common/employees-service';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { MatTableModule } from '@angular/material/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LoadingComponent } from './core/compnents/loading-component';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { AddEmployeeComponent } from './employee/add-employee.ts/add-employee-component';
import { AppComponent } from './app.component'; // 导入AppComponent

@NgModule({
  declarations: [AppComponent, EmployeesComponent, LoadingComponent, AddEmployeeComponent], // 添加AppComponent声明
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatTableModule,
    MatProgressSpinnerModule,
    BrowserAnimationsModule,
  ],
  providers: [EmployeesService, provideAnimationsAsync('animations')],
  bootstrap: [AppComponent], // 切换根组件为AppComponent
})
export class AppModule {}

3. 移除EmployeesComponent中的路由出口 #

修改EmployeesComponent模板，删除内部的<router-outlet>：

<div class="table-container">
  <table mat-table [dataSource]="employees" class="employee-table">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> Id. </th>
      <td mat-cell *matCellDef="let element"> {{ element.id }} </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name. </th>
      <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
    </ng-container>

    <ng-container matColumnDef="age">
      <th mat-header-cell *matHeaderCellDef> Age. </th>
      <td mat-cell *matCellDef="let element"> {{ element.age }} </td>
    </ng-container>

    <ng-container matColumnDef="phoneNumber">
      <th mat-header-cell *matHeaderCellDef> Phone Number. </th>
      <td mat-cell *matCellDef="let element"> {{ element.phoneNumber }} </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> Actions </th>
      <td mat-cell *matCellDef="let element">
        <button mat-button color="primary" (click)="edit(element)">Edit</button>
        <button mat-button color="warn" (click)="delete(element)">Delete</button>
      </td>
    </ng-container>

    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <loading [loading]="loading" class="loading-spinner"></loading>
</div>

修改后原理说明 #

Angular路由的工作逻辑是：根组件（AppComponent）中的<router-outlet>作为路由渲染的容器，当URL变化时，路由器会根据路由配置，将对应组件替换渲染到这个容器中。现在EmployeesComponent和AddEmployeeComponent都是路由级别的组件，导航时会完全替换显示，解决URL变化但页面不切换的问题。

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