0

我是 NGXS 的新手。所以只是为了测试，我在简单的测试应用程序上尝试了简单的设置，您使用 导入应用程序组件中的状态forRoot，一切正常。

现在我有一个稍微大一点的应用程序，我找到了forFeature功能状态的功能。所以在我的模块中，我有以下代码：

imports: [...,
NgxsModule.forFeature([MyFeatureState]),
...]

然后我将模块延迟加载到每个功能的路由模块中，如下所示：

const routes: Routes = [
{
    path: '',
    component: AppComponent,
    children: [
        {path: '', redirectTo: 'my-feature', pathMatch: 'full'},
        {path: 'my-feature', loadChildren: './my-feature/my-feature.module#MyFeatureModule'},
    ]
}
];

然后这是我的状态类：

export interface MyFeatureStateModel {
  myFeatures: MyFeature[]
}

@State<MyFeatureStateModel>({
  name: 'myFeatures',
  defaults: {
    myFeatures: []
}
})
@Injectable()
export class MyFeatureState {
   constructor(private myFeatureService: MyFeatureService) {}

   @Select()
   static getAll(state: MyFeatureStateModel) {
      return state.myFeatures;
   }
 }

我的显示组件上有以下选择：

@Select(MyFeatureState.getAll) myFeature$: Observable<any>;

选择状态上的数据时出现问题。你会注意到我现在已经使用了 any 因为我不知道这里真正返回了什么，但是当我订阅时，myFeature$我可以看到数据并且它也被返回了，但不是只返回数据本身，而是返回像这样：

{myFeature: Array[]} // the array is the actual data

此外，当我打印以控制台状态快照时，我得到以下信息：

{
  myFeature:
     myFeature: []
}

所以当我订阅时会发生这样的额外步骤：

this.myFeature$.subscribe((data: any) => {
  this.myFeature = data.myFeature;
  // previously I only have to do this.myFeature = data
});

这一切都很好，除了以前我尝试过时forRoot我不必这样做。

此外，当我使用forFeature状态时的其他问题无法自动检测到商店已经有数据，因此即使商店中已经有数据，它也会继续查询后端。我不得不添加一个我认为不理想的 if 语句。同样在我使用它之前，forRoot它可以自动检测，因此应用程序只查询一次后端，并且只在页面加载时查询。

知道为什么会发生这些吗？

4

1 回答 1

0

尝试这个

this.myFeature$.subscribe(({data}) => {
  this.myFeature = data.myFeature;
});
于 2021-11-29T19:49:22.837 回答