如何在Angular2 +中的ContentChildren QueryList中呈现1个孩子的内容

Question

我想渲染QueryList中填充的一个元素的内容 ContentChildren.

假设我想构建制表符组件,这是我使用此类组件的模板:

<my-tabs>
  <my-tab title="title1">some content 1<my-tab>
  <my-tab title="title2">some content 2<my-tab>
</my-tabs>

我当前的标签组件html:

<div class="header">
  <ul>
    <li> *ngFor="let tab of tabs, let i = index; let isLast = last">...<li>
  </ul>        
</div>
<!-- Missing !!! -->

码:

@ContentChildren(MyTabComponent) public tabs: QueryList<MyTabComponent>;

我的问题是如何只渲染活动标签？(<!-- Missing !!! -->)

我试过了:

<ng-container [ngComponentOutlet]="tabs.toArray()[currentIndex].content"></ng-container>

<ng-container [ngTemplatetOutlet]="tabs.toArray()[currentIndex].content"></ng-container>    

<ng-container [ngComponentOutlet]="tabs.toArray()[currentIndex]"></ng-container>

<ng-container [ngTemplatetOutlet]="tabs.toArray()[currentIndex]"></ng-container>

但是从不呈现标签内容.my-tab组件html只是:

<div>body</div>
<ng-template><ng-content></ng-content></ng-template>

在这一刻.

我在网上查看别人如何解决这个问题,但每个人都在使用<ng-content></ng-content>,然后隐藏非活动标签.
但我认为更好的是只渲染所需的内容(更好的性能).

我也发现这个代码在哪里<ng-container [ngTemplateOutlet]="step.content"></ng-container>使用,但我尝试了这种方法,它没有渲染任何东西.

编辑:
我也准备stackblitz.

Answer 1

ViewChild在你StepComponent的存储元素内部使用(在你的情况下ng-template):

@Component({
    selector: "my-step",
    template: "<ng-template #innerTemplate><ng-content></ng-content></ng-template>",
})
export class StepComponent 
{
    @Input()
    public title;

    @ViewChild('innerTemplate') 
    public innerTemplate: TemplateRef<any>;
}

并设置ngTemplateOutlet为该属性StepperComponent:

<ng-template [ngTemplateOutlet]="step.innerTemplate"></ng-template>

这是分叉的StackBlitz.