代码之家  ›  专栏  ›  技术社区  ›  TKDev

将变量传递到ng内容

  •  2
  • TKDev  · 技术社区  · 6 年前

    如何将ngFor变量传递给ng内容模板。

    例如,包含组件:

    <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>
    
    1 回复  |  直到 6 年前
        1
  •  4
  •   hgiasac    6 年前

    你不能用 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) 
      @Input() itemTemplate: TemplateRef<any>;
    }
    

    所以您可以将动态模板引用到 containing-component . 在这种情况下,可以将ng模板包装在 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>