Question

我正在尝试在自定义组件中抽象ion-virtual-scroll以及许多其他代码。我需要ion-virtual-scroll来遍历其他一些自定义组件。这是抽象之前的代码示例：

<ion-virtual-scroll 
  approxItemHeight="414px"
  [trackBy]="trackBy"
  [items]="items">
  <div *virtualItem="let item">
    <some-other-custom-component [someInput]="item"></some-other-custom-component> 
  </div>
</ion-virtual-scroll>

这很好，但是我需要像这样将some-other-custom-component馈入custom-component：

<custom-component>
  <some-other-custom-component [someInput]="item"></some-other-custom-component>
</custom-component>

我要做到这一点的唯一方法就是这样（在custom-component.html内部）：

<ion-virtual-scroll  
  [approxItemHeight]="approxItemHeight"
  [trackBy]="trackBy"
  [items]="items">
  <div *virtualItem="let item">
     <ng-content>
     </ng-content>
  </div>
</ion-virtual-scroll>

但是很明显，这是行不通的，因为您无法循环播放ng-content。任何想法如何做到这一点，或者如果可能的话？谢谢！

Answer 1

我们在项目中正在做类似的事情。经过很多努力后，我终于找到了解决之道。您可以在自定义组件内的 TemplateRef 上使用 ngTemplateOutlet 。

最后看起来像这样：

custom-component.html：

<ion-virtual-scroll  
  [approxItemHeight]="approxItemHeight"
  [trackBy]="trackBy"
  [items]="items"
>
  <div *virtualItem="let item; let idx = index">
    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: idx }"> </ng-container>
  </div>
</ion-virtual-scroll>

custom-component.ts：

export class CustomComponent {
  @ContentChild(VirtualItemDirective, { static: false, read: TemplateRef }) 
    itemTemplate: TemplateRef<{
      $implicit: any;
      index: number;
  }>;

  ...
}

VirtualItemDirective的唯一目的是像虚拟滚动条的 virtualItem 一样工作。

virtual-item.directive.ts：

@Directive({ selector: '[appVirtualItem]' })
export class VirtualItemDirective {}

然后，最终的最终实现将是这样的：

<custom-component>
  <some-other-custom-component 
    *appVirtualItem="let item; let idx = index" 
    [someInput]="item">
  </some-other-custom-component>
</custom-component>

关于它的一些最后说明，尽管它可以起作用，但显然初始渲染存在一些问题。订单似乎不合时宜，我还找不到解决方法。

定制组件内部的离子虚拟滚动

1 个答案: