Как повторить фрагмент HTML несколько раз без ngFor и без другого @Component

Проблема проста, я хочу повторить фрагмент HTML, несколько раз в моем шаблоне.

Но я хочу, чтобы это повторялось в разных местах моей страницы, это означает, что ngFor не является решением, поскольку части будут повторяться напрямую друг за другом.

"Рабочее решение" должно было бы определить конкретный @Component для моего повторного HTML и сделать что-то вроде этого:

<p>Whatever html</p><my-repeated-html></my-repeated-html><h4>Whatever</h4><my-repeated-html></my-repeated-html>

Но я нахожу, что это слишком сложно создать выделенный компонент для выполнения чего-то подобного, это не имеет никакого функционального значения и требуется только для структуры html, которую я хочу настроить.

Есть ли что-нибудь в движке шаблонов ng2, чтобы разрешить определение "внутреннего шаблона" и использовать его везде, где он мне нужен, в текущем шаблоне?

Если ответ нет, я думаю, я предпочел бы дублировать HTML, даже если это будет отстой.

Ответы

Ответ 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>

Пример плунжера

Другой Пример плунжера
который использует данные, переданные как

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

Этот способ ngOutletContext может использоваться в шаблоне, например

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

где image является свойством templateData

Если используется $implicit

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

ngOutletContext может использоваться в шаблоне, например

<template let-item>
 {{item}}

Ответ 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>