Question

我想创建一个列表组件，该组件可以基于传递的@Input列表和模板（cdkPortal）动态呈现每一行的内容。

就像，在我的列表组件html中，理想情况下，我应该在传递给每一行的列表上使用ngFor循环，并具有 cdkPortalOutlet 来呈现模板。

list.component.html

 <li #eachItem
        *ngFor="let list of lists; index as i"
        (click)="selection.emit(kv)"
        (keydown)="onOptionKeyDown($event)"

        <ng-template [cdkPortalOutlet]="rowPortalRef">
        </ng-template>
    </li>

然后，在我的使用组件中，我想要调用list组件，并准备一个cdkPortal

  <my-list [lists]="{[..]}"></my-list>

  <ng-template cdkPortal
               #myTemp="cdkPortal"
               let-context>
    <div>
      {{myTemp.context}}
    </div>
  </ng-template>

最后，在useComponent中，我获得了cdkPortal实例并将其分配给listComponent。

@ViewChild('myTemp') rowPortal: TemplatePortal<any>;
ngAfterViewInit() {
   this.listComponent.rowPortalRef = rowPortal;
}

这样，我希望每一行都可以用自己的数据呈现，但是模板相同。

但这是行不通的，因为即使我的cdkPortal假定实际数据是上下文，也无法将动态上下文数据传递给cdkPortalOutlet。我想要在cdkPortalOutLet上执行以下操作： [context] = list

 <li #eachItem
    *ngFor="let list of lists; index as i"
    (click)="selection.emit(kv)"
    (keydown)="onOptionKeyDown($event)"

    <ng-template [cdkPortalOutlet]="rowPortalRef" [context]=list>
    </ng-template>
</li>

我检查了此question，这有点不同，因为我不仅需要在afterViiewInit中分配一次contex，而且需要基于每个for循环多次分配值。

Angular如何动态地将上下文分配给cdkPortalOutlet？

0 个答案: