angular - ngContent のコンテンツに CdkVirtualScroll を適用する

Question

私のAngularアプリには次のケースがあります。

場合 ：

select基本的にスタイリングとロジックを実行し、入力のリストを描画するカスタム入力があります。

(簡略化) :

<app-select>
    <app-option
    *ngFor="let country of locations$ | async"
    [name]="'i18n.Enum.Country' | translate: { country: country.code }"
    [value]="country.code"
    ></app-option>
</app-select>

そして app-select テンプレートで私はただ行います

<div>
 <ng-content></ng-content>
</div>

簡単な例: https://stackblitz.com/edit/angular-pwdm7r?file=src/app/app.component.ts

問題 ：

*ngFor今、これを最小限のコードで実質的にスクロールできるようにしたいと思います。

1 つの方法は、仮想スクロールを使用するたびにこれを行うことです。

<app-select>
  <cdk-virtual-scroll-viewport>
    <app-option
    *cdkVirtualFor="let country of locations$ | async"
    [name]="'i18n.Enum.Country' | translate: { country: country.code }"
    [value]="country.code"
    ></app-option>
  </cdk-virtual-scroll-viewport>
</app-select>

しかし、私が作ろうとしている解決策はcdk-virtual-scroll-viewport、セレクターコンポーネント内にシングルを書くことです

<div>
  <cdk-virtual-scroll-viewport>
     <ng-content></ng-content>
  </cdk-virtual-scroll-viewport>
</div>

このように => https://stackblitz.com/edit/angular-fuw1fu?file=src/app/app.component.html

NullInjectorError: CdkVirtualScrollViewport のプロバイダーがありません!

ng-contentそのため、 cdkVirtualFor が存在する場合にのみ、コンテンツを読み取って添付しようとしました。

https://stackblitz.com/edit/angular-ax3yvu?file=src/app/select/select.component.ts

しかし、私は同じエラーを受け取り続けます。

これを達成する方法はありますか？