Question

我正在使用一个简单的组件通过异步管道（角度6）显示商店中的当前值。存储中的值是一个简单的对象（无数组），用于存储需要由查看器组件显示的当前选定元素。

<div *ngIf="(displayElement$ | async) as displayElement" class="content">
     {{displayElement | json}}
      <ng-container [ngSwitch]="displayElement.typ">
        <!-- use a ng-container to group multiple root nodes -->
        <dokument-viewer *ngSwitchCase="'Dokument'" #dokumentViewer [imageSize]="100" [zoomFactor]="0.1" [index]="0"
          [externalId]="displayElement.externalId" [pageNumber]="1"></dokument-viewer>
      </ng-container>
 </div>

在组件构造函数代码中：

 this.displayElement$ = this.store
    .select(st => st.state.currentSelectedElement)

一切正常。但是当我确实动态创建组件（componentFactoryResolver）时，视图不会获得任何更新。使用断点，我可以看到存储中的值已正确更新。

第一次尝试：

 this.displayElement$ = this.store
    .select(st => st.state.currentSelectedElement)
    .pipe(distinctUntilChanged(), tap(val => this.cd.detectChanges()));

这确实显示出一些东西。但是-确实很奇怪-它总是比当前存储数据落后一步。它显示“上一个”元素。

唯一有效的代码是订阅商店，手动管理订阅并摆脱异步管道。当然也要使用detectChanges。

但是我对使用这种方法感到（愧（尤其是detectChanges）。

我使用Asing管在做什么？

动态代码：

 // create a factory for a new WsDashboardElementComponent
    const factory = this.componentFactoryResolver.resolveComponentFactory(
      WsDashboardElementComponent
    );

    // render content
    const ngContent = this.resolveNgContent(contentToBeAdded);

    // create an injector with providers
    this.injector = Injector.create(
      [{ provide: WsDashboardComponent, useValue: null }],
      this.injector
    );

    // create the component with the content as second paramter
    const componentDashBoardElementRef = factory.create(
      this.injector,
      ngContent
    );

    // copy filled properties
    Object.keys(elementSettings).forEach(
      key => elementSettings[key] == null && delete elementSettings[key]
    );
    Object.assign(componentDashBoardElementRef.instance, elementSettings); // { ...elementSettings };

    // render updates
    componentDashBoardElementRef.hostView.detectChanges();

角异步管道无法使用Ngrx存储和动态组件更新视图

0 个答案: