如何在没有 ngFor 和没有另一个 @Component 的情况下多次重复一段 HTML？

Posted 2023-03-05

【中文标题】如何在没有 ngFor 和没有另一个 @Component 的情况下多次重复一段 HTML？

【英文标题】：How can I repeat a piece of HTML multiple times without ngFor and without another @Component?

【发布时间】：2016-10-07 04:37:12

【问题描述】：

我想在我的模板中多次重复一段 html。

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

“可行的解决方案”是为我重复的 HTML 定义一个特定的 @Component，然后执行类似的操作：

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

但是我发现创建一个专门的组件来做这样的事情有点过头了，它没有功能意义，只有我想要设置的 HTML 结构需要。

在 ng2 模板引擎中真的没有任何东西可以让我定义一个“内部模板”并在当前模板中需要它的任何地方使用它吗？

【问题讨论】：

我不明白你为什么认为一个组件是矫枉过正的。如果没有逻辑，那么组件只不过是模板和选择器。怎么可能更简单？

例如，如果我可以定义类似的东西 并在哪里重用它，这可能会更简单我想要 。 （这不存在，只是一个例子）。但是我明白ng2的设计就是把它放在一个组件里，ok。

只在同一个组件内？

是的，这不需要对其他组件可用。

我在答案中添加了一个 Plunker。

【参考方案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

【讨论】：

目前正在尝试使用 Plunker。还不能让它工作。

无法使上述解决方案工作@GünterZöchbauer。我没有看到任何正在渲染的内容

@GünterZöchbauer 在您的示例 Plunkers 中没有呈现任何内容

可以从文件中设置模板吗？

没有。一种解决方法是在运行时构建一个组件，如***.com/questions/34784778/…

中所述

【参考方案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>