ngFor和带有内容投影的自定义组件

Question

我在寻找一种方法来做这件事时遇到了麻烦：

首先，我有一个上级组件

水平滚动Feed

html

<cdk-virtual-scroll-viewportorientation="horizontal">
      <div *cdkVirtualFor='let content of contents' class="card-container">
           <ng-container></ng-container>
      </div>
</cdk-virtual-scroll-viewport>

.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-horizontal-scroll-feed',
  templateUrl: './horizontal-scroll-feed.component.html',
  styleUrls: ['./horizontal-scroll-feed.component.css']
})

export class HorizontalScrollFeedComponent implements OnInit {

  @Input() contents: Array<Object> = [];


   constructor() { }

   ngOnInit() {
   }

}

第二，我有一个子组件

app-feed-card

html

<mat-card class="feed-card">
  <img class="feed-image" mat-card-image [src]='content.thumbnail'>

  <mat-card-content>
    <p class="feed-title">{{content.title}}</p>
    <p class="feed-content">
      {{content.content}}
    </p>
  </mat-card-content>

</mat-card>

.ts

import { Component, OnInit, Input } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-feed-card',
  templateUrl: './feed-card.component.html',
  styleUrls: ['./feed-card.component.css']
})

export class FeedCardComponent implements OnInit {


  @Input() content: any;


  constructor() 
  {  }

  ngOnInit() {
  }

}

我想做的是将AppFeedCard组件放入Horizo​​ntalFeedComponent内，如下所示：

<app-horizontal-scroll-feed [contents]='contents'>
  <app-feed-card [content]='content'></app-feed-card>
</app-horizontal-scroll-feed>

或

<app-horizontal-scroll-feed [contents]='contents'>
  <app-calendar-card [content]='content'></app-feed-card>
</app-horizontal-scroll-feed>

我已经尝试过，但是我没有设法使它起作用。我想到的一种方法是在父组件上实现类型输入，并使用ngIf选择合适的组件，如下所示：

<app-horizontal-scroll-feed type='feed-card' [contents]='contents'></app-horizontal-scroll-feed>

。

<cdk-virtual-scroll-viewport orientation="horizontal">
  <div *cdkVirtualFor='let content of contents;'>
    <app-feed-card *ngIf="type === 'feed-card'" [content]="content"></app-feed-card>
    <app-calendar-card *ngIf="type === 'calendar-card'" [content]="content"></app-calendar-card>
  </div>
</cdk-virtual-scroll-viewport>

但是我真的很想使用Content Projection来实现它...

感谢您的帮助！