如何从 Angular2+ 中的 ContentChildren QueryList 呈现 1 child 的内容

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>;

我的问题是如何只呈现活动选项卡？ ()

我试过了：

<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。

如何从 Angular2+ 中的 ContentChildren QueryList 呈现 1 child 的内容

How can I render content of 1 child from ContentChildren QueryList in Angular2+

angular-template

angular