Angular 2将transcluded内容绑定到循环变量

发布时间：2020-12-17 07:50:37 所属栏目：安全来源：网络整理

导读：我试图将transcluded内容绑定到组件循环内的变量,但我无法这样做. 我查看了PrimeNG的dropdown组件,他们使用模板标签和let-car绑定到循环的car变量. 但是,当我尝试这个时,我甚至无法将内容转换为内容.实现这一目标的正确方法是什么？尝试： !-- Obviously no

我试图将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>

简单的我正在努力实现的目标：

https://plnkr.co/edit/6SS03fuXmbvJB4nmf1AO?p=preview

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!