我试图将transcluded内容绑定到组件循环内的变量,但我无法这样做.
我查看了PrimeNG的dropdown组件,他们使用模板标签和let-car绑定到循环的car变量.
但是,当我尝试这个时,我甚至无法将内容转换为内容.实现这一目标的正确方法是什么？
尝试：
<!-- ObvIoUsly not gonna work --> <comp> <span>{{option.name}},{{option.type}}</span> </comp> <!-- Thought this would work but it doesn't,in odd scenarios I get the last element of the loop to transclude content and bind correctly. --> <comp> <template let-option> <span>{{option.name}},{{option.type}}</span> </template> </comp>
在组件中：
<ul>
<li *ngFor="let option of options">
<ng-content></ng-content>
</li>
</ul>
简单的我正在努力实现的目标：
更新Angular 6
ngOutletContext已重命名为ngTemplateOutletContext
模板应该是ng-template
另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
原版的
您可以获取模板引用并使用例如ngTemplateOutlet或ngForTemplate添加它以获取添加到DOM的模板内容.使用ngTemplateOutlet,您可以提供自己的上下文,然后可以使用您尝试过的模板变量进行访问.
class CompComponent {
context = {option: 'some option'};
constructor(private templateRef:TemplateRef){}
}
<ng-template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{$implicit: context}"></template>
我认为在新版本中需要这样做
<ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: context}"></template>
(但尚未验证)
也可以看看
> How to repeat a piece of HTML multiple times without ngFor and without another @Component
> Angular2 child component as data
