Как отложить обработку в ng-шаблоне до его создания?

Question

У меня есть модальный компонент, который я создаю, который довольно прост и выглядит примерно так:

<ng-template #content>
    <ng-content></ng-content>
</ng-template>

Затем я динамически создаю шаблон content, используя @angular/cdk/overlay, когда отображается модал.

Эта система прекрасно работала для меня до недавнего времени, когда у меня был сценарий, когда мне нужен модал, привязанный к каждому элементу в длинном списке. Также бывает, что в каждом модале я загружаю большое количество элементов, например

<my-modal>
  <div *ngFor="let item of lotsOfItems$ | async></div>
</my-modal>

Я предполагал, что, поскольку <my-modal> содержимое было в шаблоне, который не создается, пока не будет показано, что lotsOfItems$ не будет подписан, за исключением случаев, когда модальный показ. Если я добавлю tap(console.log) к этой наблюдаемой, хотя я вижу, что он подписывается на каждый модал, привязанный к каждому элементу в списке, что вызывает действительно прерывистый опыт DOM.

Я выискивал документациюнемного и искал в Интернете, но я не могу найти ничего о том, как определить и <ng-template>, но не имеет никаких операций внутри этого процесса, пока он не создан.

Возможно ли это?

Answer 1

На основании комментария @ yurzui я решил сделать этот обходной путь, чтобы избежать необходимости переписывать все текущие экземпляры компонента <my-modal>.

<my-modal #modal>
  <ng-container *ngIf="modal.visible">
    <div *ngFor="let item of lotsOfItems$ | async></div>
  </ng-container>
</my-modal>

Добавление *ngIf вокруг моего содержимого обернуло его вng-template и я просто привязал это к свойству visible, которое было в моем классе MyModalComponent.