Назначить #selector для div во время выполнения

Question

В моей программе у меня большой список с большим количеством данных, и чтобы сделать его более оптимизированным, я начал использовать элемент внутри html для загрузки.Раньше мой код выглядел так:

<div #selector>
   <component *ngFor=...>
</div>

А теперь он выглядит так:

<cdk-virtual-scroll-viewport>
   <component *cdkVirtualFor=...>
</cdk-virtual-scroll-viewport>

Как вы можете видеть, мой предыдущий div имел селектор, который я использовал для получения шириныdiv для механизма прокрутки, и я получил элемент, используя

@ViewChild('selector', { static: false }) public listDiv: ElementRef<any>;

и этот код, чтобы получить ширину

const scrollOfset = this.listDiv.nativeElement.scrollLeft;

Так как я начал использовать тег cdk-virtual-scroll,Я больше не могу назначить такой #selector для тега cdk, потому что во время выполнения тег генерирует, кроме него, div как дочерние элементы, и этот div имеет мой фактический компонент как дочерний, таким образом:

<cdk-virtual-scroll-viewport>
   <div>
      <component *cdkVirtualFor=...>
   </div<
</cdk-virtual-scroll-viewport>

так что сейчас моя фактическая ширина прокрутки и предыдущее поведение, которое я использовал для дочернего представления, находятся в сгенерированном div между cdk-virtual-scroll и компонентом, div, который я не могу назначить #selector из html.

Есть ли способ объявить такой селектор во время выполнения непосредственно из моего кода, возможно, в ngOnInit () или ngAfterInitView (), я думаю, поэтому мой html выглядит так?

<cdk-virtual-scroll-viewport>
   <div #selector>
      <component *cdkVirtualFor=...>
   </div<
</cdk-virtual-scroll-viewport>

Спасибо.