Question

我对延迟加载角特征模块（也是NGXS状态的子状态）有疑问。

例如，我有一个父模块和两个子模块。我想延迟加载这两个子模块。我的NGXS商店如下所示：

{
  parent: {
    children1: {
      ...
    },
    children2: {
      ...
    }
  }
}

由于我的父模块的状态具有以下代码，因此子级功能模块的延迟加载无法正常工作，并显示错误消息，指出未找到子状态。我不会导入两个子模块进行延迟加载。

@State<ParentModel>({
  ...
  children: [Child1State, Child2State]
})

有人知道如何处理这种情况吗？

Answer 1

我不认为您可以将延迟加载的模块中的状态直接分配为另一个模块的子级。这些状态将不存在，直到这些状态驻留在模块中，从而导致出现错误。

您应该能够在扩展父状态的延迟加载模块中创建要素状态。那应该将新加载的状态添加到现有状态模型中。

请参阅：https://ngxs.gitbook.io/ngxs/advanced/lazy

Answer 2

我对您的问题有些困惑，尤其是这个表达式：

惰性加载角度特征模块，它们也是NGXS状态的子状态

惰性加载状态和子状态完全不同。延迟加载的状态在根级别与状态图合并，而子状态与它们所属的父状态合并。

仅当您尚未向模块添加状态时，才引发错误Child state not found，因为NGXS试图实例化它。它还在结尾You may have forgotten to add states to module上给您提示。

看下面的代码：

@State<Novel[]>({
  name: 'novels',
  defaults: []
})
export class NovelsState {}

@State({
  name: 'books',
  defaults: {
    mostPopularBooks: []
  },
  children: [NovelsState]
})
export class BooksState {}

@NgModule({
  imports: [
    CommonModule,
    NgxsModule.forFeature([BooksState, NovelsState])
  ]
})
export class BooksModule {}

BooksModule是通过loadChildren延迟加载到其他地方的。

带有NGXS子状态的Angular延迟加载模块

2 个答案: