Angular 4 ng-content select 不适用于动态创建的嵌入元素

Question

我正在使用 ComponentFactoryResolver 动态创建要插入到我的模板中的元素，该模板使用 ng-content 进行嵌入。

在我将 select 属性添加到我的 ng-content 之前，一切都很好用。请参阅 this plunker 来说明问题。如果我在 app.ts 的第 63 行从我的 HeaderComponent 模板中删除 content-top 属性，模板将按预期呈现。

但是我确实需要使用 select 因为要注入两个不同的模板片段所以我不能简单地删除它。

感谢任何帮助。

Answer 1

angular 中的包含仅适用于直系子代。实现它的一种方法可能是使用 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>;

Plunker Example

Angular 4 ng-content select 不适用于动态创建的嵌入元素

Angular 4 ng-content select not working on dynamically created transcluded elements

javascript

transclusion

angular