Angular 11: TypeError: this...不是一个函数模态对话框

如何解决Angular 11: TypeError: this...不是一个函数模态对话框

假设我已经使用 BsModalService 为我的组件定义了一个模态：

transportModal.component.ts:

@Component({
  selector: 'cc-transport',templateUrl: './transportModal.component.html',styleUrls: ['./transportModal.component.scss'],changeDetection: ChangeDetectionStrategy.OnPush
})
export class TransportModalComponent {

  @ViewChild('modal',{ static: true })
  modalTemplate: TemplateRef<any>;

  @Output() apply = new EventEmitter();
  @Output() cancel = new EventEmitter();

  modalRef: BsModalRef;

  form: FormGroup;

  constructor(private modalService: BsModalService,private fb: FormBuilder,public configService: ConfigService,private validationService: ValidationService,private notificationService: NotificationService) {
  }

show() {
    this.form.markAsPristine();

    this.notificationService.clearAllMessages();
    this.modalRef = this.modalService.show(this.modalTemplate,{ class: 'modal-lg' });
    this.modalService.onHide.pipe(take(1)).subscribe(() => {
      this.cancel.emit();
    });
  }

及其 html 组件 (transportModal.component.html)：

<ng-template #modal>
  <div class="modal-header">
    <h4 class="modal-title pull-left">{{'test.notification' | translate}}</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="close()">
    </button>
  </div>

  <div class="modal-body" [formGroup]="form">

    <div class="row">
      <div class="col-12 col-sm-6">
        <si-newton-form-group [label]="'test.changedTables' | translate" ccFormGroup>
          <cc-input-validationmessage [form]="form" controlName="version"></cc-input-validationmessage>
        </si-newton-form-group>
      </div>
    </div>

  </div>
  </div>
</ng-template>

在第二个组件 (test.component.ts) 中，我通过在 transport() (this.openModal()) 中调用 openModal 来调用 transportModal.component 中的 show 函数；

@ViewChild('transportModal',{ static: true }) transportModal: TransportModalComponent;

  openModal() {
    this.transportModal.show();
  }

 transport() {
      this.confirmationService.confirm({
        message: this.translate.instant('releaseApprove.transportMessage'),accept: () => {
          this.releaseApproveService.transportTemporaryRelease(this.selectedItem).subscribe(() => {

            this.notificationService.addSuccessMessageText(this.translate.instant('releaseApprove.version') + ' '
              + this.selectedItem.id + this.translate.instant('releaseApprove.successTransport'));
            this.scrollTable.reset();
          },() => {
            this.notificationService.addErrorMessage('releaseApprove.transportError');
            this.openModal();
          });
        },reject: () => {
        },});
  }

最后在第二个组件 (test.component.html) 的 html 文件中，我添加了以下行：

<cc-confirm-dialog #transportModal></cc-confirm-dialog>

当我通过单击启动应用程序时，我收到以下错误，而不是从模式中获取弹出窗口：

error-handler.service.ts:23 TypeError: this.transportModal.show 不是函数。

有人可以帮我吗？