Ленивый загруженный компонент не обновляет состояние NGXS - PullRequest
Новая
       13

Ленивый загруженный компонент не обновляет состояние NGXS

1 голос
/ 13 февраля 2020

Я начал играть с новыми загруженными ленивыми компонентами в 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')
  }
}

Dynami c Загрузчик компонентов 

  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 (который только здесь объявлен) работает нормально, но я предполагаю, что часть загрузки модуля, выполняемая провайдерами, не запускается?

Кто-нибудь сталкивался с чем-то подобным?

I попытался включить объявление модуля для состояния внутри файла .ts компонента, описанного в этой статье , но без игры в кости: (

1 Ответ

1 голос
/ 13 февраля 2020

Так что я смог собрать решение, посмотрев, как ленивый маршрутизатор angular загружает модули.

Я управляю кешем настроек в сервисе уровня приложения и динамически загружаю вещи с помощью этого парня.

Рад услышать лучшие решения:) 

@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))));
  }
}
...