html - Angular 2 将 "template"用于 ng-content 以在组件循环内部使用

Question

我正在尝试创建一个组件来执行一些操作并循环遍历结果集。我希望能够为循环结果集中的项目提供一个"template"。

例如，这是我想要的想法:

<search-field>
    <ng-template let-item>
        <span><strong>{{item.foo}}</strong></span>
        <span>{{item.bar}}</span>
    </ng-template>
</search-field>

search-field 组件中的内容应该用作该组件中循环结果集的每次迭代的模板。

这是 search-field 组件的样子:

<div class="search-container">
    <div class="search-input">
        <input type="text" class="form-control" placeholder="Search users..." [(ngModel)]="searchString" (ngModelChange)="searchStringChanged($event)">
        <div class="md-icon">search</div>
    </div>

    <ul class="search-results" *ngIf="searchResults.length > 0">
        <li class="search-results__item" *ngFor="let result of searchResults">
            <ng-content [item]="item"></ng-content> <!-- Template should be used here on each iteration and allow to pass in "item" to use in example up above -->
        </li>
    </ul>
</div>

如何将循环的每个项目传递给 ng-content，以便我可以在第一个示例的代码中访问它？

Answer 1

通过以下方法解决了这个问题:

组件模板用法:

<search-field>
    <ng-template let-item>
        <span><strong>{{item.username}}</strong></span>
        <span>{{item.email}}</span>
    </ng-template>
</search-field>

组件模板定义:

<div class="search-container">
    <div class="search-input">
        <input type="text" class="form-control" placeholder="Search users..." [(ngModel)]="searchString" (ngModelChange)="searchStringChanged($event)">
        <div class="md-icon">search</div>
    </div>

    <ul class="search-results" *ngIf="searchResults.length > 0">
        <li class="search-results__item" *ngFor="let item of searchResults">
            <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-template>
        </li>
    </ul>
</div>

组件类:

@Component({...})
export class SearchFieldComponent {
    @ContentChild(TemplateRef) templateRef: TemplateRef<any>;

    // ...
}

解释:

使用 ng-template，我可以使用 let-item 语法，其中 item 是将传递到模板中的数据在循环的每次迭代中。

为了使上述成为可能，在 search-field 组件中，我使用 ng-template 和 ngTemplateOutlet 作为模板引用，并且 ngTemplateOutletContext 被赋予值 {$implicit: item}，其中 item 是我想要传递到模板中的数据。

最后，在组件类中，我需要使用 ContentChild 来获取对要在 ngTemplateOutlet 中使用的模板的引用。