Listview中的ng-content不会被注入内容

Question

我有一个名为ItemsSelector的组件，其中包含ListView：

<ListView class="list-group" [items]="[1,22,34,6]" style="height:1250px">
    <ng-content></ng-content>
</ListView>

这就是我使用ItemsSelector组件的方式：

<StackLayout class="home-panel">
    <ItemsSelector>
        <ng-template let-item="$implicit" let-i="index">
            <Label [text]="'111'" color="black"></Label>
            <Label [text]="'222'" color="black"></Label>
        </ng-template> 
    </ItemsSelector>
<StackLayout>

但似乎ng-content没有注入内容，它显示的项目与我想要的不一样

BTW - 根据docs，这是使用Listview的方式：

所以我所做的就是从外面发送视图，但没有成功......

问题：

为什么没有ng-content注入我提供的内容？

Playground

Answer 1

问题在于，当您使用ng-template时，实际上是在传递模板，而不是直接传递内容。

因此，您需要使用<ng-content>和<ng-container>而不是ngTemplateOutlet。

在您的ItemSelector.component.ts中，从TemplateRef, ContentChild

导入@angular/core

现在在类中声明一个模板：@ContentChild(TemplateRef) template;

现在在ItemSelector.component.ts中，您可以像这样调用模板：

<ListView class="list-group" [items]="[1,22,34,6]" style="height:1250px">
    <ng-container [ngTemplateOutlet]="template"></ng-container>
</ListView>

完成上述步骤后，如果您看到，您现在也将一些内容传递给ListView组件。

因此，在ListView.component.html中，您现在必须实施<ng-content>

让我知道这是否有效。