Solución:
A partir de hoy open El método de https://ng-bootstrap.github.io/#/components/modal tiene la siguiente firma: open(content: string | TemplateRef<any>, options: NgbModalOptions). Como puede ver en esta firma, puede abrir un modal que proporcione contenido como:
stringTemplateRef
los string-El argumento de tipo no es muy interesante; de hecho, se agregó principalmente para ayudar a la depuración / prueba unitaria. Al usarlo, puede pasar solo … bueno, un fragmento de texto, sin ningún marcado, no directivas angulares. Como tal, es realmente una herramienta de depuración y no algo que sea útil en escenarios de la vida real.
los TemplateRef El argumento es más interesante ya que le permite pasar las directivas de marcado + que se mostrarán. Puedes echarle una mano a un TemplateRef haciendo <template #refVar>...content goes here...</template> en algún lugar de la plantilla de su componente (una plantilla de un componente desde el que planea abrir un modal). Como tal, el TemplateRef El argumento es poderoso ya que le permite tener marcado, directivas, otros componentes, etc. La desventaja es que TemplateRef es útil solo si está abriendo un modal desde un componente con una plantilla.
Tengo la impresión de que está buscando la función que está planificada pero que aún no se implementó: la capacidad de abrir un modal con un tipo de componente como contenido. Funcionaría de la siguiente manera: modalService.open(MyComponentWithContent). Como mencioné, esto es parte de la hoja de ruta, pero aún no se ha implementado. Puede rastrear esta función siguiendo https://github.com/ng-bootstrap/ng-bootstrap/issues/680
Ahora puede hacer lo siguiente …
Supongamos que tiene un componente de modelo. Confirme el modelo de que desea utilizarlo en cualquier otro componente.
- ModelComponentName se agrega a las declaraciones y las secciones entryComponent en module.ts
- No olvide agregar NgbModule.forRoot () en las importaciones de su archivo de módulo que contiene las declaraciones que mencionó anteriormente.
-
Asegúrese de que la plantilla de componente de su modelo esté dentro de la etiqueta div y no en la etiqueta ng-template.
A continuación, puede utilizar el siguiente método abierto desde cualquier otro componente.
modalReference: NgbModalRef;
constructor(private modalService: NgbModal) { }
this.modalReference = this.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', keyboard: false, centered: true});