angular templateRef使用不在父组件内部呈现的结构指令传递给父级

Question

我试图在父组件的子元素中呈现模板，具体取决于其类型值，如此模式中所述

我使用myTemplateDirective将ng-template传递给父视图（我的容器）

  --myTemplateDirective--
 this.parent.setDirective(this);

 --my-container--
 setDirective(test) {
    this.tmpl = test;
 }

在我的容器中，我将它传递给我的组件，该组件具有作为输入的指令并呈现它

const element = this.template.renderTemplate(this.data ,this.viewContainerRef);


  renderTemplate(templateData, vcRef) {
this.renderCount++;

const viewData = {
  $implicit: {
    data: templateData,
    renderCount: this.renderCount
  }
};
const childView = vcRef.createEmbeddedView(this.templateRef, viewData);

// =========== WORKAROUND =============
// We have to use private API to force DOM to update
// childView['detectChanges']();
// =========== /WORKAROUND =============


this.cd.detectChanges();

return childView.rootNodes[0];
}

在创建embeddedView之后，我从返回的childView.rootNodes [0]得到的结果是：

<!---->

我创建了一个包含所有代码的plunker，以更好地理解问题plunker sample code

Answer 1

根据你的图表，你似乎有两个嵌套的ng-template。

Angular将转换使用结构指令的以下内容：

<ng-template *myTemplate>
    <div>...</div>
</ng-template>

对此：

<ng-template myTemplate>
    <ng-template>
        <div>...</div>
    </ng-template>
</ng-template>

如果您尝试渲染外部模板，这可能是一个问题，因为它只包含一个模板，因此无需渲染。