如何在没有 ngFor 和另一个 @Component 的情况下多次重复一段 HTML? [英] How can I repeat a piece of HTML multiple times without ngFor and without another @Component?
问题描述
我想在模板中多次重复一段 HTML.
但我希望它在我页面的不同位置重复.这意味着 ngFor 不是解决方案，因为这些片段会一个接一个地直接重复.
一个有效的解决方案"是为我重复的 HTML 定义一个特定的 @Component，然后做类似的事情:
<p>任何 html</p><my-repeated-html></my-repeated-html><h4>随便</h4><my-repeated-html></my-repeated-html>但是我发现创建一个专门的组件来做这样的事情是多余的，它没有功能意义，只有我想要设置的 HTML 结构才需要.
ng2 模板引擎中真的没有任何东西可以让我定义内部模板"吗?并在当前模板中我需要的任何地方使用它?
更新 Angular 5
ngOutletContext 重命名为 ngTemplateOutletContext
另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
原创
最近添加的 ngTemplateOutlet 可能是你想要什么
</template>目前可以这样使用
<pre>{{self |json }}</pre><template [ngTemplateOutlet]="templateRef"></template>模板也可以传递给子组件在那里渲染
@Component({选择器:'some-child'，提供者:[]，模板:`<div><h2>孩子</h2><template [ngTemplateOutlet]="template" ></template><template [ngTemplateOutlet]="template" ></template>`，指令:[]})导出类子{@ContentChild(TemplateRef) 模板:TemplateRef;}
像这样使用
<模板><pre>{{self |json }}</pre></some-child> 另一个 Plunker 示例
使用作为
这种方式ngOutletContext可以在模板中使用
{{图片}}其中 image 是 templateData
如果使用$implicit
ngOutletContext 可以在模板中使用，如
{{物品}}I want to repeat a piece of HTML, multiple times in my template.
But I want it to be repeated at different places on my page. This means that ngFor is not the solution as the pieces would be repeated directly one after the other.
A 'working solution' would be to define a specific @Component for my repeated HTML, and do something like that :
<p>Whatever html</p>
<my-repeated-html></my-repeated-html>
<h4>Whatever</h4>
<my-repeated-html></my-repeated-html>
But I find it overkill to create a dedicated component for doing something like that, it has no functional meaning and is only required by the HTML structure I want to set up.
Is there really nothing in ng2 template engine to allow me to define an "inner template" and use it wherever I need it in the current template?
update Angular 5
ngOutletContext was renamed to ngTemplateOutletContext
See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
The recently added ngTemplateOutlet might be what you want
<template [ngTemplateOutlet]="templateRefExpression" [ngOutletContext]="objectExpression"></template>
It can currently be used like
<template #templateRef>
<pre>{{self | json }}</pre>
</template>
<template [ngTemplateOutlet]="templateRef"></template>
A template can also be passed to a child component to be rendered there
@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;
}
to be used like
<some-child>
<template>
<pre>{{self | json }}</pre>
</template>
</some-child>
Another Plunker example
that uses data passed as
<template [ngTemplateOutlet]="..." [ngOutletContext]="templateData"
This way ngOutletContext can be used in the template like
<template let-image="image">
{{image}}
where image is a property of templateData
If $implicit is used
<template [ngTemplateOutlet]="..." [ngOutletContext]="{$implicit: templateData}"
the ngOutletContext can be used in the template like
<template let-item>
{{item}}
这篇关于如何在没有 ngFor 和另一个 @Component 的情况下多次重复一段 HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
