angular - 将变量传递给 ng-content

Question

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

例如，包含组件：

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

嵌套的内容组件：

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

例如，两者：

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

标签： angularangular5angular6

Answer 1

您不能ng-content用作动态模板。ng-template改为使用

<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>;
}

因此，您可以将动态模板引用到containing-component. 在这种情况下，您可以将 ng-template 包裹起来content-component

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

<ng-template #itemTmpl let-data>

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

或使用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>