在Angular 7中无法使用@Viewchild访问模态组件模板变量

如何解决在Angular 7中无法使用@Viewchild访问模态组件模板变量

我有一个MainComponent，里面有一个ModalComponent。 ModalComponent（ngx-bootstrap / modal）最初是自然隐藏的，单击按钮即可打开。我试图从其.ts文件访问ModalComponent内部的表单，但是它恰好总是空的。

MainComponent

<div>
...
<button (click)="showModalComponent()"></button>
<ModalComponent></ModalComponent>
</div>

ModalComponent.html

<ng-template #template>
     <button (click)="submitForm()"></button>
     <form target="frame" id="testForm" action="someUrl" method="POST" #testForm>
            <input type="hidden" id="testId" name="testField" #testId/>
     </form>
</ng-template>

ModalComponent.ts

@Component
export class ModalComponent {

  modalSize = 'modal-lg';
  readonly config: ModalOptions = {class: this.modalSize,ignoreBackdropClick: true};
  modalRef: BsModalRef;

  // Get modalTemplate
  @ViewChild('template') modalTemplate: TemplateRef<any>;
  @ViewChild('testForm') form;

  openModal() {
    this.modalRef = this.modalService.show(this.modalTemplate,this.config);
  }


  submitForm(){
      console.log(form); // Here it is undefined
  }
  
}

我认为这与表单在第一次加载时不在dom上有关，但是我无法使用@ViewChild找出一种方法。我尝试过类似下面的操作，但是没有运气内容未定义

@ViewChild('testForm') set testForm(content: ElementRef) {
    this.form = content;
    console.log(content); // This function is triggered when the modal is opened but content is undefined 
  }