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

Question

Проблема проста, я хочу повторить фрагмент 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, даже если это отстой.

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>

Пример стекаблица

Еще один пример Plunker
который использует данные, переданные как

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