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

Question

我正在尝试根据此模式中解释的类型值在父组件的子元素中呈现模板

我正在使用 myTemplateDirective

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

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

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

在我的容器中，我将它传递给 my-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];
}

创建嵌入视图后，我从 return 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>

在您的情况下，这可能是个问题，如果您尝试渲染外部模板，因为它内部只包含一个模板，因此不会渲染任何内容。

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

angular templateRef passed to parent using structural directive not rendering inside parent component

angular-template

angular-directive

angular