如何在没有ngFor和没有其他@Component的情况下多次重复HTML片段

问题描述：

问题很简单，我想在模板中多次重复一段HTML。如何在没有ngFor和没有其他@Component的情况下多次重复HTML片段

但我希望它在我的页面中的不同位置重复，这意味着ngFor不是解决方案，因为这些作品会一个接一个地直接重复。

A“工作液”是定义一个特定@Component我反复HTML，做这样的事情： <p>Whatever html</p><my-repeated-html></my-repeated-html><h4>Whatever</h4><my-repeated-html></my-repeated-html>

但我觉得它矫枉过正做类似的东西创建一个专用组件，它没有功能意义，只是我想要设置的html结构才需要。

在ng2模板引擎中是否真的没有什么可以定义一个“内部模板”并在当前模板中使用它的任何地方？

如果答案是没有我想我宁愿复制HTML，即使这有点糟糕。

我不知道为什么你认为一个组件是矫枉过正。如果没有逻辑，组件几乎不会超过模板和选择器。它怎么会更简单？ –

例如，这可能会更简单如果我可以定义类似的东西并在需要的地方重复使用。（这不存在，只是一个例子）。但我明白ng2的设计是把它放在一个组件中，好的。 – ATX

只在同一个组件内？ –

答

更新角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 example

使用作为

<template [ngTemplateOutlet]="..." [ngOutletContext]="templateData"

这样ngOutletContext传递数据的另一种Plunker example
可以在模板中使用像

<template let-image="image"> 
{{image}}

其中image是templateData

属性如果$implicit是使用

<template [ngTemplateOutlet]="..." [ngOutletContext]="{$implicit: templateData}"

的ngOutletContext可以在模板中使用像

<template let-item> 
{{item}}

正在尝试使用Plunker。无法使其工作。 –

无法在@GünterZöchbauer上获得上述解决方案。我没有看到任何被渲染的东西 – giwook

@GünterZöchbauer在你的例子中没有渲染Plunkers – maxbellec

答

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

如何在没有ngFor和没有其他@Component的情况下多次重复HTML片段

相关推荐