将变量传递给 ng-content [英] Passing for variable to ng-content

问题描述

如何将 ngFor 变量传递给 ng-content 模板.

例如，包含组件:

<li *ngFor="let item of itemsArray"><ng-content></ng-content>

嵌套的内容组件:

<span *ngIf="item.type_one"></span><span *ngIf="item.type_two"></span>

两个例子:

<包含组件><内容组件></内容组件></包含组件>

解决方案

您不能使用 ng-content 作为动态模板.使用 ng-template 代替

<li *ngFor="let item of itemsArray"><ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-容器>

export class ContainingComponent {...@ContentChild(TemplateRef, {static: true})@Input() itemTemplate: TemplateRef;}

所以你可以将动态模板引用到包含组件中.在这种情况下，您可以将 ng-template 包裹在 content-component

上

<包含组件 [itemTemplate]="itemTmpl"></包含组件><ng-template #itemTmpl let-data><内容组件[项目]="数据"></内容组件></ng-模板>

或者直接使用ng-template:

<包含组件[itemTemplate]="itemTmpl"[itemArray]="项目"></包含组件><ng-template #itemTmpl let-data><div><span *ngIf="data.type_one"></span><span *ngIf="data.type_two"></span>

</ng-模板>

How do I pass an ngFor variable to the ng-content template.

Example, the containing-component:

<ul>
    <li *ngFor="let item of itemsArray">
       <ng-content></ng-content>
    </li>
</ul>

The nested content-component:

<div>
    <span *ngIf="item.type_one"></span>
    <span *ngIf="item.type_two"></span>
</div>

Example, both:

<containing-component>
    <content-component>
    </content-component>
</containing-component>

解决方案

You can not use ng-content as dynamic template. Use ng-template instead

<ul>
    <li *ngFor="let item of itemsArray">
       <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item  }">
       </ng-container>
    </li>
</ul>

export class ContainingComponent {

  ...

  @ContentChild(TemplateRef, {static: true}) 
  @Input() itemTemplate: TemplateRef<any>;
}

So you can reference dynamic template into containing-component. In this case, you can wrap ng-template over content-component

<containing-component [itemTemplate]="itemTmpl">
</containing-component>

<ng-template #itemTmpl let-data>

    <content-component
      [item]="data">
    </content-component>
</ng-template>

Or use ng-template directly:

<containing-component 
   [itemTemplate]="itemTmpl"
   [itemArray]="items">
</containing-component>

<ng-template #itemTmpl let-data>
  <div>
    <span *ngIf="data.type_one"></span>
    <span *ngIf="data.type_two"></span>
  </div>
</ng-template>

这篇关于将变量传递给 ng-content的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！