Angular切换组件后路由到employees时表格数据丢失求助

一、路由切换后 Employee List 数据消失问题 #

问题分析 #

刷新页面时数据正常显示，但从“Add Employee”切回“Employee List”时表格为空，核心原因有两点：

1. RouterLink 相对路径错误：当前使用的routerLink="employees"是相对路径，当处于/create-employee页面时，点击会导航到/create-employee/employees（非预期路径），组件虽可能渲染，但数据加载逻辑无法正确触发。
2. 组件实例复用导致数据未重新加载：Angular 默认复用路由组件实例，从其他页面切回/employees时，组件的ngOnInit不会再次执行，若数据仅在初始化时加载，就会出现空表格。

解决方案 #

1. 修正 RouterLink 为绝对路径
   修改app.component.html中的导航链接，添加斜杠使用绝对路径：

   <li class="nav-item">
       <a routerLink="/employees" routerLinkActive="active" class="nav-link">Employee List</a>
   </li>
   <li class="nav-item">
       <a routerLink="/create-employee" routerLinkActive="active" class="nav-link">Add Employee</a>
   </li>
   

2. 确保每次导航时重新加载数据
   在EmployeeListComponent中订阅路由事件，每次进入该路由时重新获取数据：

   import { Component, OnInit, OnDestroy } from '@angular/core';
   import { Router, NavigationEnd } from '@angular/router';
   import { Subscription } from 'rxjs';
   import { EmployeeService } from './employee.service'; // 假设你有该服务
   
   @Component({
     selector: 'app-employee-list',
     templateUrl: './employee-list.component.html',
     styleUrls: ['./employee-list.component.css']
   })
   export class EmployeeListComponent implements OnInit, OnDestroy {
     employees: any[] = [];
     private routeSubscription: Subscription;
   
     constructor(private router: Router, private employeeService: EmployeeService) {}
   
     ngOnInit(): void {
       this.loadEmployees();
       // 监听导航结束事件，回到/employees时重新加载数据
       this.routeSubscription = this.router.events.subscribe(event => {
         if (event instanceof NavigationEnd && event.url === '/employees') {
           this.loadEmployees();
         }
       });
     }
   
     loadEmployees(): void {
       this.employeeService.getEmployees().subscribe(data => {
         this.employees = data;
       });
     }
   
     ngOnDestroy(): void {
       this.routeSubscription.unsubscribe();
     }
   }
   

   或者，在路由配置中强制每次导航都执行守卫/解析逻辑：
   修改app.routing.module.ts：

   const routes: Routes = [
     {path: 'employees', component: EmployeeListComponent, runGuardsAndResolvers: 'always'},
     {path: 'create-employee', component: CreateEmployeeComponent},
     {path: '', redirectTo: 'employees', pathMatch: 'full'}
   ];
   

二、NG02801 HttpClient 警告问题 #

问题分析 #

该警告提示 HttpClient 默认使用 XMLHttpRequest，建议切换到现代 Fetch API。你的项目基于 NgModule（无app.config.ts），需在app.module.ts中补充配置。

解决方案 #

在app.module.ts的providers数组中添加provideHttpClient(withFetch())，即使已导入HttpClientModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, provideHttpClient, withFetch } from '@angular/common/http';
import { AppRoutingModule } from './app.routing.module';
import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { CreateEmployeeComponent } from './create-employee/create-employee.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
    CreateEmployeeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    provideHttpClient(withFetch())
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意：该配置适用于 Angular 17+ 版本，若使用更低版本，可忽略此警告或升级 Angular 版本。

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