Question

我有一个当前的代码块，用于在将组件添加到DOM之后创建动态组件并生成目录（服务执行诸如从DOM获取所有h3元素以便可以将其添加到目录中）： / p>

  generateDynamicComponents(): void {
this.someService.pageContent$
  .subscribe((page: CmsDto.Page) => {
    page.groups
      .filter((group: CmsDto.Group) => !isNullOrUndefined(dynamicComponentMap()[group.type]))
      .forEach((group: CmsDto.Group) => {
        const componentFactory = this.componentFactoryResolver
          .resolveComponentFactory(dynamicComponentMap()[group.type]);
        const viewHost: ViewContainerRef = this.dynamicComponentHostDirective.viewContainerRef;
        const componentRef = viewHost.createComponent(componentFactory);
        (componentRef.instance as DynamicArticleBaseComponent).group = group;
    });
    // set timeout to get around the time of components being created and added to DOM.
    setTimeout(() => this.tableOfContentsService.generateTableOfContents());
  });
}

有没有办法知道何时创建这些组件并准备在DOM中选择而无需使用setTimeout？我想使用像ContentChildren这样的东西，但是我不能使用它来选择h3元素，而是因为你不能选择没有用{{1}标记的基本HTML元素而使用document.querySelectorAll('h3');。 }。

Answer 1

有关setTimeout的部分，您可以将其替换为

this.ngZone.onMicrotaskEmpty.first()
    .subscribe(() => {...});

参见Angular Material source code中的第446行进一步解释。

必须等待将消息绘制到工具提示，以便叠加层可以根据文本大小正确计算正确的位置。

我认为这也是你的情况，也必须等待渲染dom。

在ViewContainerRef上调用createComponent之后访问新添加的DOM元素

1 个答案: