Попытка показать компонент, завернутый в ng-template, используя BsModalService

Question

Я пытаюсь отобразить компонент, используя ngx-bootstrap BsModalService. Я пытаюсь предоставить входные данные, используя шаблон, и затем моя цель - подписаться на определенный вывод при закрытии модального.

Проблема в том, что modalRef.content имеет значение null.

HTML

<ng-template #myModal>
  <my-component [data]="data$ | async">
  </my-component>
</ng-template>

ц

constructor(
  private readonly api: ApiService,
  private readonly modalService: BsModalService,
) {
}

@ViewChild('myModal', { read: TemplateRef }) myModal;

onClick(){
  this.api.getData().subscribe(data => {
    this.data$.next(data);

    const modal: BsModalRef = this.modalService.show(this.myModal);      
    const comp = (<MyComponent>modal.content);
    // comp is null
  });
}

Я предполагаю, что перенос компонента в ng-template делает его недоступным для BsModalService. Возможен ли этот сценарий вообще?

Answer 1

То есть по документации

содержание
Тип: любой Ссылка на компонент внутри модального. Нуль , если модал был создан с TemplateRef

Если вы хотите получить доступ к содержимому шаблона, вы можете использовать @ContentChild, но вы должны изменить свой код следующим образом:

constructor(
  private readonly api: ApiService,
  private readonly modalService: BsModalService,
) {
}

@ContentChild(MyComponent) myComp: MyComponent;

onClick(){
  this.api.getData().subscribe(data => {
    this.data$.next(data);

    this.modalService.show(this.myModal);  

    // not sure if it's already available here, or you need to wrap it in a setTimeout...    
    const comp = this.myComp;
  });
}