Angular2: cierre ng-bootstrap modal con evento de retroceso del navegador

Revisamos de forma profundamente cada enunciados de nuestro espacio con el objetivo de enseñarte siempre la información más veraz y certera.

Solución:

De hecho, resolví mi problema insertando un estado de historial “falso” cuando abrí el modal. La función para apertura modal y cierre modal se ve así:

modalRef: NgbModalRef;

open(content: NgbModal) 
    this.modalRef = this.modalService.open(content);

    // push new state to history
    history.pushState(null, null, 'modalOpened');

    this.modalRef.result.then((result) => 
        this.closeResult = `Closed with: $result`;
    , (reason) => 
        this.closeResult = `Dismissed $this.getDismissReason(reason)`;
    );


private getDismissReason(reason: any): string 
    // go back in history if the modal is closed normal (ESC, backdrop click, cross click, close click)
    history.back();

    if (reason === ModalDismissReasons.ESC) 
        return 'by pressing ESC';
     else if (reason === ModalDismissReasons.BACKDROP_CLICK) 
        return 'by clicking on a backdrop';
     else 
        return  `with: $reason`;
    

Las funciones open() y getDismissReason() se copian de https://ng-bootstrap.github.io/#/components/modal “Modal con opciones predeterminadas”. Las partes importantes que agregué están impulsando el nuevo estado del historial en la apertura modal y retroceden en el historial en el cierre modal “normal”. Cuando retrocedemos con el botón Atrás del navegador, esta función no se llama y retrocedemos en el historial automáticamente.

Para asegurarse de que el modal se cierre en el evento de historial anterior, necesita las siguientes líneas:

constructor(private location: PlatformLocation, private modalService: NgbModal)
{
    location.onPopState((event) => 
        // ensure that modal is opened
        if(this.modalRef !== undefined) 
            this.modalRef.close();
        
);

Conclusión: Cuando se abre el modal, empujamos un nuevo estado de historial (por ejemplo, con la página actual). Si el modal se cierra normalmente (usando ESC, botón de cierre, …) el evento de retroceso del historial se activa manualmente (no queremos apilar estados de historial). Si el navegador activa el evento de retroceso del historial, solo tenemos que cerrar el modal si está abierto. La pila de historial empujada asegura que permanezcamos en la misma página.

Limitaciones: Agregar una nueva pila de historial y retroceder en el historial también brinda la oportunidad de avanzar en el historial (después de cerrar el modal). Este no es el comportamiento deseado.

ng-bootstrap modal, ahora tiene dismissAll()

https://ng-bootstrap.github.io/#/components/modal/api#NgbModal

Puede cerrar todos los modales abiertos usando un protector de ruta cuando ng-router detecta un cambio (incluido el retroceso del navegador)

export class NgbModalDismissAllGuard implements CanActivateChild  Promise 

y en la configuración del enrutador..

const routes: Routes = [
   
    path: '', 
    canActivateChild: [NgbModalDismissAllGuard], 
    loadChildren: () => import('./Custom.Module').then(m => m.CustomModule) 
  
];

Recuerda dar recomendación a este artículo si te valió la pena.

---

---

Utiliza Nuestro Buscador