Angular懒加载含NGXS子状态的特性模块问题咨询

这个问题我之前也碰到过，核心原因是你在父状态的children数组里预先声明了还未懒加载的子状态，NGXS初始化时找不到这些子状态的定义，就会抛出“child state not found”的错误。解决的关键是把父状态与懒加载子状态的注册逻辑解耦，具体操作步骤如下：

1. 修改父状态的定义，移除预声明的子状态 #

首先，把父状态装饰器里的children数组删掉——因为这两个子状态是懒加载的，在父模块初始化时还不存在，不能提前关联：

import { State } from '@ngxs/store';
import { ParentModel } from './parent.model';

@State<ParentModel>({
  name: 'parent',
  defaults: {
    // 父状态的默认值
  }
  // 移除原来的children数组
})
export class ParentState {}

2. 在懒加载子模块中注册子状态，并关联父状态 #

每个懒加载的子状态需要通过parent属性明确指定所属的父状态名称，然后在对应的子模块中用NgxsModule.forFeature()注册该状态。

以Child1State为例： #

首先定义子状态时添加parent配置：

import { State } from '@ngxs/store';
import { Child1Model } from './child1.model';

@State<Child1Model>({
  name: 'children1',
  defaults: {
    // 子状态的默认值
  },
  parent: 'parent' // 指定父状态的name值，关联到父状态
})
export class Child1State {}

然后在Child1Module中导入并注册这个子状态：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxsModule } from '@ngxs/store';
import { Child1State } from './state/child1.state';
import { Child1RoutingModule } from './child1-routing.module';
import { Child1Component } from './child1.component';

@NgModule({
  declarations: [Child1Component],
  imports: [
    CommonModule,
    Child1RoutingModule,
    NgxsModule.forFeature([Child1State]) // 注册子状态，NGXS会自动关联到父状态
  ]
})
export class Child1Module {}

Child2State和Child2Module的配置完全同理，只需要替换对应的名称和文件即可。

3. 确认路由的懒加载配置正确 #

确保父模块的路由配置中，子模块是通过loadChildren进行懒加载的，示例如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      { 
        path: 'child1', 
        loadChildren: () => import('./child1/child1.module').then(m => m.Child1Module) 
      },
      { 
        path: 'child2', 
        loadChildren: () => import('./child2/child2.module').then(m => m.Child2Module) 
      }
    ]
  }
];

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

额外注意事项 #

• 如果你需要在父状态中访问子状态的数据，要确保子模块已经加载完成后再进行操作。可以通过监听路由事件，或者使用NGXS的selectSnapshot时添加判断，避免在子状态未注册时访问导致错误。
• 确保你的NGXS版本在3.x及以上，这个版本开始支持懒加载子状态的关联功能。

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