angular - Cómo repetir una pieza de HTML varias veces sin ngFor y sin otro @Component

Question

El problema es simple, quiero repetir una pieza de HTML, varias veces en mi plantilla.

Pero quiero que se repita en diferentes lugares de mi página, esto significa que un ngFor no es la solución ya que las piezas se repetirían directamente una tras otra.

Una ''solución de trabajo'' sería definir un @Component específico para mi HTML repetido y hacer algo así: <p>Whatever html</p><my-repeated-html></my-repeated-html><h4>Whatever</h4><my-repeated-html></my-repeated-html>

Pero me parece excesivo crear un componente dedicado para hacer algo así, ya que no tiene un significado funcional y solo es requerido por la estructura html que quiero configurar.

¿Realmente no hay nada en el motor de plantillas ng2 que permita definir una "plantilla interna" y usarla donde sea que la necesite en la plantilla actual?

Si la respuesta es no , supongo que preferiría duplicar el HTML, incluso si eso apesta.

Answer 1

actualizar Angular 5

ngOutletContext fue renombrado a ngTemplateOutletContext

Ver también https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

original

El ngTemplateOutlet recientemente agregado puede ser lo que desea

<template [ngTemplateOutlet]="templateRefExpression" [ngOutletContext]="objectExpression"></template>

Actualmente se puede usar como

<template #templateRef>
    <pre>{{self | json }}</pre>
</template>

<template [ngTemplateOutlet]="templateRef"></template>

También se puede pasar una plantilla a un componente secundario para que se represente allí

@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;
}

para ser utilizado como

<some-child>
  <template>
    <pre>{{self | json }}</pre>
  </template>
</some-child>

ejemplo de stackblitz

Otro ejemplo de Plunker
que usa datos pasados ​​como

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

De esta manera, ngOutletContext se puede usar en la plantilla como

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

donde image es una propiedad de templateData

Si se usa $implicit

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

ngOutletContext se puede usar en la plantilla como

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

y en el componente 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>

presta atención a:

[ngOutletContext]="{$implicit: item}"

tanto como

<template #customTemplate let-item>