Angular 18 Service路由切换状态丢失，新实例被创建问题咨询

可能原因及排查方向 #

• 组件/路由手动声明Service：如果在组件的providers数组、路由配置的Route对象providers中声明了该Service，会覆盖根注入的单例，导致每个组件/路由加载时生成独立实例。

  错误示例（组件级注入）：

  @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    providers: [YourService] // 此处会创建局部实例，破坏根单例
  })
  

  错误示例（路由级注入）：

  const routes: Routes = [
    {
      path: 'test',
      component: TestComponent,
      providers: [YourService] // 路由加载时生成新实例
    }
  ];
  

• providedIn配置错误：检查是否拼写错误（比如写成'Root'），或误指定了非根注入器（如platform），虽然platform也是单例，但配置错误可能导致预期外的实例行为。

  正确配置示例：

  @Injectable({
    providedIn: 'root' // 必须为小写的'root'
  })
  export class YourService {}
  

• Standalone组件的providers冲突：Angular 18默认启用Standalone组件，若在Standalone组件的providers数组中声明该Service，同样会创建局部实例。
• 状态变量被主动重置：排查Service内部逻辑，确认是否存在路由切换时被调用的方法，意外重置了状态变量（比如在组件订阅的回调中覆盖状态值）。

解决步骤 #

1. 移除所有组件、路由、Standalone组件中声明该Service的providers配置项，确保仅通过providedIn: 'root'提供单例。
2. 检查Service内部代码，删除或修改主动重置状态的逻辑。例如：

   // 需避免的错误逻辑：路由切换时调用会清空状态
   clearState() {
     this.userData = null;
   }
   

3. 验证单例有效性：在Service构造函数中添加日志，确认是否多次初始化：

   @Injectable({ providedIn: 'root' })
   export class YourService {
     constructor() {
       console.log('YourService 实例已创建'); // 若多次打印，说明存在多实例
     }
   }
   

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