如何使用 ngForTemplate 包装模板? [英] How to wrap template using ngForTemplate?

问题描述

我尝试使用 ngForTemplate 为自定义模板制作 ListView 组件

list-view.component.html

<模板 ngFor [ngForOf]="items" [ngForTemplate]="模板">

list-view.component.ts

@Component({选择器:'m-list-view'，styleUrls: ['./list-view.component.less'],templateUrl: './list-view.component.html'})导出类 ListViewComponent {@Input() 项目:任何[] = [];@ContentChild(TemplateRef)模板:任何；}

当我像这样使用它时:

<template let-item="$implicit">**一些 HTML 标记**</m-list-view>

结果是:

<div class="list-view">**一些 HTML 标记****一些 HTML 标记****一些 HTML 标记**...

</m-list-view>

但我需要这个:

<div class="list-view"><div class="list-view-item">**一些 HTML 标记**</div><div class="list-view-item">**一些 HTML 标记**</div><div class="list-view-item">**一些 HTML 标记**</div>...

</m-list-view>

如何将每个列表视图项模板包装在 div.list-view-item 中?

解决方案

更新 Angular 5

ngOutletContext 重命名为 ngTemplateOutletContext

现在建议您使用以下语法:

<div class="list-view-item" *ngFor="let item of items"><ng-container *ngTemplateOutlet="template; context: item"></ng-容器>

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原创

<div class="list-view-item" *ngFor="let item of items"><template [ngTemplateOutlet]="template" [ngOutletContext]="item"></template>

另见https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html

I try to make ListView component using ngForTemplate for custom templates

list-view.component.html

<div class="list-view">
    <template ngFor [ngForOf]="items" [ngForTemplate]="template">
    </template>
</div>

list-view.component.ts

@Component({
    selector: 'm-list-view',
    styleUrls: ['./list-view.component.less'],
    templateUrl: './list-view.component.html'
})

export class ListViewComponent {
    @Input() items: any[] = [];

    @ContentChild(TemplateRef)
    template: any;
}

When I use it like this:

<m-list-view [items]="categories">
    <template let-item="$implicit">
        **some HTML markup**
    </template>
</m-list-view>

the resulting is:

<m-list-view>
    <div class="list-view">
        **some HTML markup**
        **some HTML markup**
        **some HTML markup**
        ...
    </div>
</m-list-view>

but I need this:

<m-list-view>
    <div class="list-view">
        <div class="list-view-item">**some HTML markup**</div>
        <div class="list-view-item">**some HTML markup**</div>
        <div class="list-view-item">**some HTML markup**</div>
        ...
    </div>
</m-list-view>

What should I do to wrap each list view item template in div.list-view-item?

解决方案

update Angular 5

ngOutletContext was renamed to ngTemplateOutletContext

It is now advised that you use the following syntax:

<div class="list-view">
  <div class="list-view-item" *ngFor="let item of items">
    <ng-container *ngTemplateOutlet="template; context: item">
    </ng-container>
  </div>
</div>

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

original

<div class="list-view">
  <div class="list-view-item" *ngFor="let item of items">
    <template [ngTemplateOutlet]="template" [ngOutletContext]="item"></template>
  </div>
</div>

See also https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html

这篇关于如何使用 ngForTemplate 包装模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！