Спасибо! Этот подход решает также вложенные пользовательские компоненты

аюсь создать компонент, который будет делать некоторые вещи и циклически повторять набор результатов. Я хочу иметь возможность предоставить «шаблон» для элементов в циклическом наборе результатов.

Например, это идея, к которой я стремлюсь:

<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-контент, чтобы у меня был доступ к нему в коде первого примера?

Ответы на вопрос(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.

 Stefan Rein19 июл. 2018 г., 14:14
Спасибо! Этот подход решает также вложенные пользовательские компоненты

Ваш ответ на вопрос