ng-bootstrap modal：通过typescript打开它

Question

我遇到了问题，我想帮助从组件中打开一个模式。 当用户在表单中进行验证时，我想打开模态。

.component.html

<ng-template #modalExample let-c="close" let-d="dismiss">
/** Modal body **/
</ng-template>

<form (ngSubmit)="f.form.valid && signin()" #f="ngForm" class="">
/** Buttons, labels, buttons **/ 
</form>

.component.ts

signin() { 
/**Calling backend**/ 
this.modalService( *REFERENCE TO MODAL HERE* )  
}

我尝试过使用

@ViewChild('modalExample') modalExample: ElementRef
this.modalService.open(this.modalExample);

Answer 1

open方法要求组件或模板ref正常运行，ViewChild默认为您提供TemplateRef。要解决此问题，请将ViewChild声明更改为：

@ViewChild('modalExample', {read: TemplateRef}) modalExample: TemplateRef<any>;

并在您想要打开模式时将其传递给this.modalService.open(this.modalExample)，这应该有效。

Bootstrap site有各种示例，您可以查看如何打开模态。