如何在没有ngFor的情况下多次重复一段HTML，而没有其他的@Component
问题很简单，我想重复一段HTML，在我的模板中多次。
但是我希望它能够在我的页面的不同位置重复使用，这意味着ngFor不是解决scheme，因为它们会一个接一个地直接重复。
一个“工作解决scheme”将是为我的重复的HTML定义一个特定的@Component，并做这样的事情： <p>Whatever html</p><my-repeated-html></my-repeated-html><h4>Whatever</h4><my-repeated-html></my-repeated-html>
但是我发现创build一个专门的组件来完成这样的事情是没有意义的，只有我想要设置的html结构才需要它。
在ng2模板引擎中是否真的没有什么可以定义一个“内部模板”，并在当前模板中使用它，无论我需要它？
如果答案是否定的，我想我宁愿复制HTML，即使这样有点烂。
更新Angular 5
ngOutletContext被重命名为ngTemplateOutletContext
另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
原版的
最近添加的ngTemplateOutlet可能是你想要的
<template [ngTemplateOutlet]="templateRefExpression" [ngOutletContext]="objectExpression"></template>
它目前可以用来像
<template #templateRef> <pre>{{self | json }}</pre> </template> <template [ngTemplateOutlet]="templateRef"></template>
一个模板也可以传递给一个子组件在那里被渲染
@Component({ selector: 'some-child', providers: [], template: ` <div> <h2>Child</h2> <template [ngTemplateOutlet]="template" ></template> <template [ngTemplateOutlet]="template" ></template> </div> `, directives: [] }) export class Child { @ContentChild(TemplateRef) template:TemplateRef; }
被用来像
<some-child> <template> <pre>{{self | json }}</pre> </template> </some-child>
Plunker例子
另一个Plunker的例子
使用传递的数据
<template [ngTemplateOutlet]="..." [ngOutletContext]="templateData"
这种方式ngOutletContext可以在模板中使用
<template let-image="image"> {{image}}
其中image是templateData一个属性
如果使用$implicit
<template [ngTemplateOutlet]="..." [ngOutletContext]="{$implicit: templateData}"
ngOutletContext可以在模板中使用
<template let-item> {{item}}
<campaign-channels-list (onItemSelected)="_onItemSelected($event)" [customTemplate]="customTemplate" (onDragComplete)="_onDragComplete($event)" [items]="m_blockList"></campaign-channels-list> <template #customTemplate let-item> <a href="#" [attr.data-block_id]="item.blockID"> <i class="fa {{item.blockFontAwesome}}"></i> <span>{{item.blockName}}</span> <i class="dragch fa fa-arrows-v"></i> <span class="lengthTimer hidden-xs"> {{item.length | FormatSecondsPipe}} </span> </a> </template>
和rx组件中：
<div class="sortableList"> <li (click)="_onItemSelected(item, $event, i)" *ngFor="let item of m_items; let i = index" class="listItems list-group-item" [ngClass]="{'selectedItem': m_selectedIdx == i}"> <template [ngTemplateOutlet]="customTemplate" [ngOutletContext]="{$implicit: item}"> </template> </li> </div>
注意：
[ngOutletContext]="{$implicit: item}"
以及
<template #customTemplate let-item>
