Question

我正在尝试使用ngx-bootstrap BsModalService显示组件。我试图使用模板提供输入数据，然后我的目标是在关闭模式时订阅特定的输出。

问题在于modalRef.content为空。

html

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

ts

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

按documentation

内容
类型：任意引用模态内部的组件。空（如果已使用TemplateRef创建模态）

如果要访问模板的内容，可以使用<div id="mybutton"> <span>OK</span> <div id="myBar"></div> </div>，但是必须将代码更改为此：

@ContentChild

尝试使用BsModalService显示包裹在ng-template中的组件

1 个答案: