如何从 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>，然后隐藏了不活动的标签。
但我认为最好只渲染需要的内容（更好的性能）。

我还找到了this 代码，其中使用了<ng-container [ngTemplateOutlet]="step.content"></ng-container>，但我尝试了这种方法，它没有渲染任何东西。

已编辑：
我也准备stackblitz。

Answer 1

在您的StepComponent 中使用ViewChild 来存储元素（在您的情况下为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。