打开后更改 NgbModal 大小

Question

我有一个最初有尺寸的模态框，但我希望模态框在我更改表单中的某个值时改变尺寸。

我在启动模态的组件 .ts 文件中有这个

const modalRef = this.modalService.open(ModalFormComponent, { size : 'xl', scrollable: true });

如果模态中的信息发生变化，模态大小需要更改为lg

Answer 1

NgbModalclassreturns和NgbModalRef的open方法。 NgbModalRef的_windowCmptRef.instance.size属性定义了当前打开的Bootstrap模态（NgbModal）的大小属性。

现在的问题是如何从弹出组件访问NgbModalRef。一种方法是在服务中定义引用对象。像这样

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class MyserviceService {
  public modalRef: any;  //modalRef will be stored in this variable
  constructor() { }
}

现在像这样打开 NgbModal

this.myService.modalRef = this.ngbModalService.open(PopupComponent,  { size : 'xl', scrollable: true });

在 PopupComponent 中，您可以像这样更改模式的大小

this.myService.modalRef._windowCmptRef.instance.size='sm'; //the size property would be changed to small size.

谢谢。

打开后更改 NgbModal 大小

Change NgbModal size after open

angular

typescript

bootstrap-modal