ng-bootstrap modal：通过打字稿打开它

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 方法期望组件或模板引用正常工作，ViewChild 默认为您提供 TemplateRef。要解决此问题，请将您的 ViewChild 声明更改为：

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

当您想打开模式时，将其传递给this.modalService.open(this.modalExample)，这应该可以工作。

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