使用结构指令将角度templateRef传递给父对象，而不在父组件内部渲染

Question

我试图根据模板的类型值在父componenet的子元素中呈现模板

我正在使用myTemplateDirective将ng模板传递给父视图（我的容器）

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

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

在我的容器中，将其传递给我的componenet，后者将指令作为输入并呈现

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 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>

如果您要渲染外部模板，这可能是您的问题，因为外部模板内部仅包含一个模板，因此没有要渲染的东西。