Angular 4 ng內容選擇不適用於動態創建的已包含元素

Question

我正在使用ComponentFactoryResolver動態創建要插入到我的模板中的元素，該元素使用ng-content進行包含。

在我向ng-content添加一個select屬性之前，一切都很好。 請查看演示該問題的插件 。 如果我從app.ts第63行的HeaderComponent模板中刪除content-top屬性，則該模板將按預期方式呈現。

但是，我確實需要使用select因為有兩個不同的模板片段要注入，所以我不能簡單地將其刪除。

任何幫助表示贊賞。

Answer 1

僅在直系子女中，以角度進行包含才有效。 一種ngTemplateOutlet工作方式是使用ngTemplateOutlet從動態組件中提升內容：

<some-other-component>
    <ng-template content-host></ng-template>
    <ng-template top-content [ngTemplateOutlet]="topContent"></ng-template>
    <ng-template bottom-content [ngTemplateOutlet]="bottomContent"></ng-template>
</some-other-component>

component.ts

topContent: TemplateRef<any>;
bottomContent: TemplateRef<any>

const componentRef = viewContainerRef.createComponent(componentFactory);
const instance = componentRef.instance;
componentRef.changeDetectorRef.detectChanges();

this.topContent = instance.templates.find(x => x.place === 'top-content').templateRef;
this.bottomContent = instance.templates.find(x => x.place === 'bottom-content').templateRef;

在動態組件上聲明了模板屬性的位置

@ViewChildren(TranscludeMeToDirective) templates: QueryList<TranscludeMeToDirective>;

柱塞示例