Question

问题很简单，我想在我的模板中多次重复一段HTML。

但是我想在页面的不同位置重复它，这意味着ngFor不是解决方案，因为这些片段将一个接一个地重复。

A＆＃39;工作解决方案＆＃39;将为我重复的HTML定义一个特定的@Component，并执行类似的操作： <p>Whatever html</p><my-repeated-html></my-repeated-html><h4>Whatever</h4><my-repeated-html></my-repeated-html>

但是我觉得创建一个专门的组件来做类似的事情有点过分，它没有任何功能意义，只有我想设置的html结构才需要。

ng2模板引擎中是否真的没有允许定义＆＃34;内部模板＆＃34;并在当前模板中的任何地方使用它？

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

Answer 1

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

stackblitz example

另一个Plunker example
使用以

传递的数据

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

这种方式ngOutletContext可以在模板中使用，如

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

其中image是templateData

的属性

如果使用$implicit

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

ngOutletContext可以在模板中使用，如

<template let-item>
 {{item}}

Answer 2

<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

2 个答案: