Question

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

我想说我想构建标签组件，这是我使用此类组件的模板：

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

我还发现了使用<ng-container [ngTemplateOutlet]="step.content"></ng-container>的{{3}}代码，但我尝试了这种方法并且它不会渲染任何内容。

编辑：
我还准备this。

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个孩子的内容

1 个答案: