更新角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 example
使用作为
<template [ngTemplateOutlet]="..." [ngOutletContext]="templateData"
这样ngOutletContext
传递数据的另一种Plunker example
可以在模板中使用像
<template let-image="image">
{{image}}
其中image
是templateData
属性如果$implicit
是使用
<template [ngTemplateOutlet]="..." [ngOutletContext]="{$implicit: templateData}"
的ngOutletContext
可以在模板中使用像
<template let-item>
{{item}}
我不知道为什么你认为一个组件是矫枉过正。如果没有逻辑,组件几乎不会超过模板和选择器。它怎么会更简单? –
例如,这可能会更简单如果我可以定义类似的东西The html I want repeated 并在需要的地方重复使用。 (这不存在,只是一个例子)。但我明白ng2的设计是把它放在一个组件中,好的。 –
ATX
只在同一个组件内? –