Angular 2使用“模板”用于在组件循环中使用ng-content [英] Angular 2 use a "template" for ng-content to use inside component loop

问题描述

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

例如，这是我想要的一种想法：

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

搜索字段组件中的内容应该用作该组件中循环结果集的每次迭代的模板。

这就是搜索字段组件可能看起来像：

 < div class =search-container> 
< div class =search-input> 
< input type =textclass =form-controlplaceholder =Search users ...[（ngModel）] =searchString（ngModelChange）=searchStringChanged（$ event）> 
< div class =md-icon>搜寻< / div> 
< / div> 
 
< ul class =search-results* ngIf =searchResults.length> 0> 
 
< ng-content [item] =item>< / ng-content> <！ - 模板应在每次迭代中使用，并允许传入item以用于上面的示例 - > 
< / li> 
< / ul> 
< / div> 
  

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

解决方案

使用以下方法解决此问题：

组件模板用法：

 < 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 =textclass =form-controlplaceholder =Search users ...[（ngModel）] =searchString（ngModelChange）=searchStringChanged（$ event）> 
< div class =md-icon>搜寻< / 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（{...}）
导出类SearchFieldComponent {
 @ContentChild（TemplateRef）templateRef：TemplateRef< any> ;; 
 
 // ... 
} 
  

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

为了实现上述可能性，在 search-field 组件中，我使用 ng-template 和 ngTemplateOutlet 作为模板引用， ngTemplateOutletContext 给出值 {$ implicit：item} ，其中 item 是我要传入模板的数据。

最后，在组件类中，我需要使用 ContentChild 来获取要在 ngTemplateOutlet 。

I am trying to create a component that will do some stuff and loop over a result set. I want to be able to provide a "template" for the items in the looped result set.

For instance, this is kind of the idea I am going for:

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

The content within the search-field component should be used as a template for each iteration of the looped result set within that component.

This is how the search-field component may look:

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

How can I pass each item of the loop to the ng-content so that I have access to it in the code of the first example?

解决方案

Solved this with the following:

Component template usage:

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

Component template definition:

<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 class:

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

    // ...
}

The explanation:

Using ng-template, I can use the let-item syntax, where item is the data that will be passed into the template on each iteration of the loop.

And in order to make the above possible, in the search-field component I use ng-template with ngTemplateOutlet as the template reference, and ngTemplateOutletContext is given the value {$implicit: item}, where item is the data I want to pass into the template.

Lastly, in the component class I need to use ContentChild to get the reference to the template to use in the ngTemplateOutlet.

这篇关于Angular 2使用“模板”用于在组件循环中使用ng-content的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！