如何在没有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,即使这样有点烂。

2 Solutions collect form web for “如何在没有ngFor的情况下多次重复一段HTML,而没有其他的@Component”

更新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}} 

其中imagetemplateData一个属性

如果使用$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>

  • Angular 2应该使用哪种types的文件夹结构?
  • Angular2dynamic更改CSS属性
  • 量angular器和噶玛可以一起使用吗?
  • Angular2 QuickStart npm start无法正常工作
  • Angular 2 - 如何使用新的angular度2.0.0-rc.1路由器
  • 如何处理angular-ui-router解决scheme中的错误
  • 如何处理AngularJS中的$资源服务错误
  • NgFor不会使用Angular2中的Pipe更新数据
  • 将当前范围传递给AngularJS服务
  • Angular2多个路由器sockets在同一个模板中
  • ng作为属性中的索引值