Angular 延迟加载的组件不更新NGXS状态

我开始在angular 9中使用新的延迟加载组件。我有一个使用NGXS的有状态组件，其状态是延迟加载在组件附近的模块中，但是一旦组件呈现，存储就不会用新状态更新

功能模块

@NgModule({
  imports: [
    NgxsModule.forFeature([PurchaseState]),
    SharedModule, 
    FormsModule, 
    GridModule,
    PurchasesApiModule,
    SidePanelCoreModule
  ],
  declarations: [PurchaseDetailsPageComponent, PurchaseDetailsFormComponent, PurchaseDetailsAllotmentListComponent],
})
export class PurchaseDetailsModule {
  constructor() {
    console.log('PURCHASE CONSTRUCTED')
  }
}

动态组件加载程序

  async getComponent(key: string) {
    const lazyComp = await import('@pe/purchase-details').then(c => c.PurchaseDetailsPageComponent);
    const factory = this.componentFactoryResolver.resolveComponentFactory(lazyComp);
    this._component = this.content.createComponent(factory, null, this.injector);
  }

像

GridModule

（只在这里声明）这样的东西可以正常工作，但是我猜模块加载的提供者部分没有运行

有人遇到过这样的事情吗

---

我已经尝试在本文中描述的component.ts文件中包含状态的模块声明，但没有骰子：（

因此，在了解angular router如何延迟加载模块后，我能够拼凑出一个解决方案

我在应用程序级服务中管理配置缓存，并使用这个家伙动态加载东西

很高兴听到更好的解决方案：）

@组件({
选择器：“应用程序惰性”，
templateUrl:'./app lazy.component.html'，
样式URL:['./app lazy.component.scss']，
})
导出类StatefulLazyComponent实现OnInit、OnDestroy{
@ViewChild（'content'，{read:ViewContainerRef，static:true}）content:ViewContainerRef；
_lazyLoadSub：订阅；
建造师(
专用componentFactoryResolver:componentFactoryResolver，
专用注射器：注射器，
专用编译器：编译器，
) {}
恩戈尼尼特（）{
常量配置={
组件：导入（'@pe/purchasedetails'）。然后（c=>c.PurchaseDetailsPageComponent），
模块：导入（'@pe/purchasedetails'）。然后（m=>m.purchasedetails模块）
};
这是。_lazyLoadSub=combinelatetest([
这个.getComponentObs（config.component），
this.getModuleFactory（config.module）
]).订阅（数据=>{
常数[compFactory，moduleFactory]=数据；
const module=moduleFactory.create（this.injector）；
const component=this.content.createComponent（compFactory，null，this.injector）；
//模块和组件已加载，现在可以使用它们进行操作
});
}
恩贡德斯特罗（）{
如果（这个）{
这个._lazyLoadSub.unsubscribe（）；
}
}
getComponentObs（承诺：承诺）：可观察{
从（promise.pipe）返回（合并映射（comp=>of（this.componentFactoryResolver.resolveComponentFactory（comp）））；
}
getModuleFactory（承诺：承诺）：可观察{
从（promise.pipe）返回（mergeMap（t=>from（this.compiler.compileModuleAsync（t））；
}
}

@Component({
  selector: 'app-lazy',
  templateUrl: './app-lazy.component.html',
  styleUrls: ['./app-lazy.component.scss'],
})
export class StatefulLazyComponent implements OnInit, OnDestroy {

  @ViewChild('content', { read: ViewContainerRef, static: true }) content: ViewContainerRef;
  _lazyLoadSub: Subscription;
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private injector: Injector,
    private compiler: Compiler,
  ) {}

  ngOnInit() {
    const config  = {
      component: import('@pe/purchase-details').then(c => c.PurchaseDetailsPageComponent),
      module: import('@pe/purchase-details').then(m => m.PurchaseDetailsModule)
    };

    this._lazyLoadSub = combineLatest([
      this.getComponentObs(config.component),
      this.getModuleFactory(config.module)
      ]).subscribe(data => {
      const [compFactory, moduleFactory] = data;
      const module = moduleFactory.create(this.injector);
      const component = this.content.createComponent(compFactory, null, this.injector);
      // Module and component are loaded can now do stuff with them
    });
  }

  ngOnDestroy() {
    if(this._lazyLoadSub) {
      this._lazyLoadSub.unsubscribe();
    }
  }

  getComponentObs(promise: Promise<Type<any>>): Observable<ComponentFactory<any>> {
    return from(promise).pipe(mergeMap(comp => of(this.componentFactoryResolver.resolveComponentFactory<any>(comp))));
  }

  getModuleFactory(promise: Promise<Type<any>>): Observable<NgModuleFactory<any>> {
      return from(promise).pipe(mergeMap(t => from(this.compiler.compileModuleAsync(t))));
  }
}