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

Solución:

De hecho, resolví mi problema insertando un estado de historial “falso” al abrir el modal. La función de apertura modal y cierre modal se parece a la siguiente:

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é son impulsar el nuevo estado del historial en modal abierto y volver al historial en el cierre modal “normal”. Cuando volvemos con el botón de retroceso del navegador, esta función no se llama y regresamos automáticamente al historial.

Para asegurarse de que el modal está cerrado en el evento de retroceso del historial, 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, presionamos 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 los estados del historial). Si el navegador activa el evento de retroceso del historial, solo tenemos que cerrar el modal si está abierto. La pila de historial enviada 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 utilizando un route-guard cuando ng-router detecta un cambio (incluido el navegador hacia atrás)

export class NgbModalDismissAllGuard implements CanActivateChild {
  constructor(private modalService: NgbModal) {}

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (this.modalService.hasOpenModals()) this.modalService.dismissAll();
    return true;
  }
}

y en router-config ..

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

---

---

Utiliza Nuestro Buscador